在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. Linq 之 Select 和 where 的用法

    最近开始学习linq.自己也总结一下,方便以后查阅. Select 同 Sql 中的 select 类似,即输出我们要的东东,感觉在 linq 中更加强大. Linq 可以对集合如数组.泛型等操作,这 ...

  2. Effective C++学习笔记之explicit

    关键字: explicit意思为“明确的”和“清楚的”,是C++的关键词,意在阻止隐式类型的转换: 使用原因: 有时候不合法的隐式转换,会让乖巧听话的程序变得不可控.所以适当地使用explicit关键 ...

  3. 将 C# 枚举序列化为 JSON 字符串 实践

    一.定义枚举 public enum SiteTypeEnum { 中转部 = 1, 网点 = 2 } 还有 BooleanEnum 和 OptTypeEnum 这两个枚举,这里暂且省略了它们的定义. ...

  4. JS冷门知识盘点

    (+new Date() 是简略写法,得到毫秒 超过多行显示省略号 overflow : hidden; text-overflow: ellipsis; display: -webkit-box; ...

  5. Adobe Photoshop CC 2015使用及扩展工具

    VAdobe Photoshop CC 2015: 简称"PS",是由Adobe Systems开发和发行的图像处理软件 扩展工具: Cuuterman:切图插件: 一个一个切图, ...

  6. Netty4ClientHttpRequest代码赏析

    private static int getPort(URI uri) { int port = uri.getPort(); if (port == -1) { if ("http&quo ...

  7. 震旦199打印机扫描A4文件

    1.需要扫描的A4文件放入输稿器 2.使用数据线将打印机.电脑连接 3.在电脑中右键打印机,选择扫描功能 4.如下图,选择选项后,点击扫描即可

  8. B树，B+树，红黑树应用场景AVL树，红黑树，B树，B+树，Trie树

    B B+运用在file system database这类持续存储结构,同样能保持lon(n)的插入与查询,也需要额外的平衡调节.像mysql的数据库定义是可以指定B+ 索引还是hash索引. C++ ...

  9. Sqlserver 系统视图简单说明

    1. 查看系统视图的sql语句 select * from sys.system_views 2. 查看所有的 dynamic management 视图的sql select * from sys. ...

  10. Angular $interval

    <!DOCTYPE html><html ng-app="myApp"><head lang="en"> <meta ...