在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透明效果无法正常显示问题

使用：

  1. <!DOCTYPE html>
  2. <html>
  3.     <head>
  4.         <meta charset="UTF-8">
  5.         <title></title>
  6.         <style type="text/css">
  7.  
  8.             .box1{
  9.                 width: 200px;
  10.                 height: 200px;
  11.                 background-image: url(img/3.png);
  12.                 background-repeat: no-repeat;
  13.             }
  14.             .box2{
  15.                 width: 200px;
  16.                 height: 200px;
  17.                 background-image: url(img/4.png);
  18.                 background-repeat: no-repeat;
  19.             }
  20.  
  21.         </style>
  22.     </head>
  23.     <body style="background-color: #bfa;">
  24.         <div class="box1"></div>
  25.         <div class="box2"></div>
  26.         <img src="img/3.png"/>
  27.  
  28.         <script type="text/javascript" src="js/DD_belatedPNG_0.0.8a-min.js"></script>
  29.         <script type="text/javascript">
  30.             DD_belatedPNG.fix("*");
  31.         </script>
  32.     </body>
  33. </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. P3830 [SHOI2012]随机树

    P3830 [SHOI2012]随机树 链接 分析: 第一问:f[i]表示有i个叶子结点的时候的平均深度,$f[i] = \frac{f[i - 1] + 2 + f[i - 1] * (i - 1) ...

  2. Centos下SFTP双机高可用环境部署记录

    SFTP(SSH File Transfer Protocol),安全文件传送协议.有时也被称作 Secure File Transfer Protocol 或 SFTP.它和SCP的区别是它允许用户 ...

  3. hadoop-mapreduce-(1)-统计单词数量

    编写map程序 package com.cvicse.ump.hadoop.mapreduce.map; import java.io.IOException; import org.apache.h ...

  4. openpyxl 实现excel字母列号与数字列号之间的转换

    https://www.cnblogs.com/apple2016/p/9686433.html

  5. 团队作业Week14——源代码管理

    0. 在吹牛之前,先回答这个问题: 如果你的团队来了一个新队员,有一台全新的机器, 你们是否有一个文档,只要设置了相应的权限,她就可以根据文档,从头开始搭建环境,并成功地把最新.最稳定版本的软件编译出 ...

  6. java 计算器实验

    1.计算器实验报告 2.https://github.com/xujinxia/text/tree/master 3.实验截图 7+8 清除 六.总结 通过本次实验让我对JFrame类.JPanel类 ...

  7. poj 1723 SOLDIERS 带权中位数

    题目 http://poj.org/problem?id=1723 题解 带权中位数类型的题目~ 可以先考虑降维,最后集合的y坐标,明显是y坐标的中位数的位置,容易求出y方向的贡献res_y.比较麻烦 ...

  8. Neo4j初探

    neo4j-desktop-win64 exe https://neo4j.com/download-thanks-desktop/?edition=desktop&flavour=winst ...

  9. QQ的小秘密

    http://ssl.ptlogin2.qq.com/test http://ping.huatuo.qq.com/ http://localhost.ptlogin2.qq.com:4300/mc_ ...

  10. 转发--UIPATH http://baijiahao.baidu.com/s?id=1596656405106773890&wfr=spider&for=pc&qq-pf-to=pcqq.c2c

    之前和朋友聊起RPA,他们第一反应就是哎哟,主流几家vendor太贵了. 我们公司业务量没有那么大,用不上啦~ 尤其Blue Prism和 Automation anywhere报价,一般规模的企业一 ...