在IE6中对图片格式png24支持度不高，如果使用的图片格式是png24，则会导致透明效果无法正常显示
解决方法：
1.可以使用png8来代替png24，即可解决问题，但是使用png8代替png24以后，图片的清晰图会有所下降；
2.使用JavaScript来解决该问题，需要向页面中引入一个外部的JavaScript文件,然后在写一下简单的JS代码，来处理该问题。

DD_belatedPNG_0.0.8a.js : http://www.dillerdesign.com/experiment/DD_belatedPNG/DD_belatedPNG_0.0.8a.js

DD_belatedPNG_0.0.8a-min.js：http://www.dillerdesign.com/experiment/DD_belatedPNG/DD_belatedPNG_0.0.8a-min.js

用上面这两个来处理png透明效果无法正常显示问题

使用：

<!DOCTYPE html>

<html>

    <head>

        <meta charset="UTF-8">

        <title></title>

        <style type="text/css">

            .box1{

                width: 200px;

                height: 200px;

                background-image: url(img/3.png);

                background-repeat: no-repeat;

            }

            .box2{

                width: 200px;

                height: 200px;

                background-image: url(img/4.png);

                background-repeat: no-repeat;

            }

        </style>

    </head>

    <body style="background-color: #bfa;">

        <div class="box1"></div>

        <div class="box2"></div>

        <img src="img/3.png"/>

        <script type="text/javascript" src="js/DD_belatedPNG_0.0.8a-min.js"></script>

        <script type="text/javascript">

            DD_belatedPNG.fix("*");

        </script>

    </body>

</html>

效果：

github地址：https://github.com/soyoungboy/htmlCssStudy/blob/master/HelloHBuilder/BelatedPNG.html

前端学习 -- Html&Css -- ie6 png 背景问题的更多相关文章

  1. 前端学习：CSS的学习总结(图解）

    前端学习:CSS的学习总结(图解) CSS代码笔记 CSS简介 css的引入方式和书写规范 CSS选择器 CSS属性 CSS盒子模型 CSS的定位

  2. 2016.01.22 前端学习 HTML/CSS

    学习HTML/CSS  http://edu.51cto.com/course/course_id-3116.html 明日实践

  3. 前端学习 -- Html&Css -- 背景

    background 在一个声明中设置所有的背景属性. background-attachment 设置背景图像是否固定或者随着页面的其余部分滚动. background-color 设置元素的背景颜 ...

  4. 前端学习笔记--CSS样式--背景和超链接

    1.背景 2.超链接: 举例:

  5. 前端学习之CSS

    CSS介绍 CSS(Cascading Style Sheet, 层叠样式表)定义如何显示HTML元素, 给HTML设置样式, 让它更加美观. 当浏览器读到一个样式表, 它就会按照这个样式表来对文档进 ...

  6. 前端学习历程--css①

    ---恢复内容开始--- 本文用自己的理解,总结网上或者自身经历的问题,加以汇总,方便查找: 一.浏览器默认样式 1.浏览器处理css&html a.css作用范围:盒子模式.浮动.定位.背景 ...

  7. 前端学习 -- Html&Css -- 条件Hack 和属性Hack

    条件Hack 语法: <!--[if <keywords>? IE <version>?]> HTML代码块 <![endif]--> <keyw ...

  8. 前端学习 -- Html&Css -- 层级和透明度

    层级 如果定位元素的层级是一样,则下边的元素会盖住上边的. 通过z-index属性可以用来设置元素的层级,可以为z-index指定一个正整数作为值,该值将会作为当前元素的层级,层级越高,越优先显示. ...

  9. 前端学习 之 CSS（三）

    九:浮动 浮动是css里面布局最多的一个属性,也是很重要的一个属性. float:表示浮动的意思. 属性值: none: 表示不浮动,默认 left: 表示左浮动 right:表示右浮动 例: htm ...

随机推荐

  1. 通过git命令行从github或服务器上克隆、修改和更新项目

    项目开发时,为了方便版本管理,许多公司采用git来控制项目版本.简单介绍下: 第一步:在本地新建一个文件夹,作为本地仓库,如“test”.打开git bash,进入到该文件夹目录下,如下图: 第二步: ...

  2. ABPZero中的Name和SurName处理,以及EmailAddress解决方案(完美)。

    使用ABPzero的朋友们都知道,User表中有Name和Surname两个字段,这两个字段对于国内的用户来说相当的不友好. 以及我们的一些系统中是不会涉及到EmailAddress字段.也就是说不会 ...

  3. Visual Studio 2019 Serial Keys

    Visual Studio 2019 Enterprise BF8Y8-GN2QH-T84XB-QVY3B-RC4DF Visual Studio 2019 Professional NYWVH-HT ...

  4. Centos下安装破解confluence6.3的操作记录

    confluence是一个专业的企业知识管理与协同软件,可以用于构建企业wiki.通过它可以实现团队成员之间的协作和知识共享.现在大多数公司都会部署一套confluence,用作内部wiki.现在co ...

  5. Redis+TwemProxy(nutcracker)集群方案部署记录

    Twemproxy 又称nutcracker ,是一个memcache.Redis协议的轻量级代理,一个用于sharding 的中间件.有了Twemproxy,客户端不直接访问Redis服务器,而是通 ...

  6. UML图中类之间的关系:依赖,泛化,关联,聚合,组合,实现（转）

    UML图中类之间的关系:依赖,泛化,关联,聚合,组合,实现   类与类图 1) 类(Class)封装了数据和行为,是面向对象的重要组成部分,它是具有相同属性.操作.关系的对象集合的总称. 2) 在系统 ...

  7. “数学口袋精灵”App的第三个Sprint计划----开发日记

    一.现状 上一阶段基本完成一个小游戏,游戏具有:随机产生算式,判断对错功能.通过轻快的背景音乐,音效,给玩家提供一个良好的氛围.   二.任务认领 完成界面,基本功能后的后续任务: 冯美欣:设计&qu ...

  8. 如何使squild服务只能使用自定义的端口号

    编辑配置文件: vim /etc/squid/squid.conf http_port  10000 使用 setsebool 命令来限制 squild 服务只能使用自定义的端口: setsebool ...

  9. zabbix 使用问题两个--中文乱码,以及监控ESXi下的虚拟机

    1. 中文乱码 最开始中文显现 长方形不显示文字.解决办法: c:\windows\fonts 下面复制 楷体的字体(字体随意看自己喜欢) 文件名一般为: simkai.ttf 2.将simkai.t ...

  10. 关于virtualenv python环境引用 pycharm相关配置的使用讨论

    今天总算决定来搞一波以前从来没有弄清楚的环境问题,也觉得是时候弄明白了. 这里先说关于python的环境引用,再谈到virtualenv最后再谈论我使用的pycharm5.0关于是用python环境的 ...