在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. Spring Boot(十六)：使用 Jenkins 部署 Spring Boot

    Jenkins 是 Devops 神器,本篇文章介绍如何安装和使用 Jenkins 部署 Spring Boot 项目 Jenkins 搭建.部署分为四个步骤: 第一步,Jenkins 安装 第二步, ...

  2. Spring+SpringMVC+MyBatis+easyUI整合进阶篇（八）线上Mysql数据库崩溃事故的原因和处理

    前文提要 承接前文<一次线上Mysql数据库崩溃事故的记录>,在文章中讲到了一次线上数据库崩溃的事件记录,建议两篇文章结合在一起看,不至于摸不着头脑. 由于时间原因,其中只讲了当时的一些经 ...

  3. Quartz.Net分布式任务管理平台（第二版）

    前言:在Quartz.Net项目发布第一版后,有挺多园友去下载使用,我们通过QQ去探讨,其中项目中还是存在一定的不完善.所以有了现在这个版本.这个版本的编写完成其实有段时间了一直没有放上去.现在已经同 ...

  4. SNMP基础知识

    注:本篇博客并非原创,仅是学习笔记 1. 概述1.1 诞生背景1.2 SNMP简介1.3 版本1.4 术语1.5 网络结构1.6 MIB简介2. Linux的SNMP安装 1. 概述 1.1 诞生背景 ...

  5. Mvc_扩展@html

    HtmlHelper的一个实例,它被定义在System.Web.Mvc名称空间下的WebViewPage类,即它对于所有MVC页面都可用)建立好扩展方法后: @Html.CreateGanderRad ...

  6. Linux系统下本地yum镜像源环境部署-完整记录

    之前介绍了Linux环境下本地yum源配置方法,不过这个是最简单最基础的配置,在yum安装的时候可能有些软件包不够齐全,下面说下完整yun镜像源系统环境部署记录(yum源更新脚本下载地址:https: ...

  7. centos6下ActiveMQ+Zookeeper消息中间件集群部署记录

    由于最近一个项目并发请求压力比较大,所以考虑改进架构,引入消息中间件集群作为一个缓冲消息队列,具体需求:1)将大量的WebService请求报文发送到mq集群之中,并保持消息先后顺序2)保证每个消息的 ...

  8. Mongodb主从复制/ 副本集/分片集群介绍

    前面的文章介绍了Mongodb的安装使用,在 MongoDB 中,有两种数据冗余方式,一种 是 Master-Slave 模式(主从复制),一种是 Replica Sets 模式(副本集). Mong ...

  9. 【读书笔记】Linux内核设计与实现（第三章）

    3.1 进程 处于执行期的程序. 进程就是正在执行的程序代码的实时结果.内核需要有效而又透明地管理所有细节. 执行线程(简称线程):在进程中活动的对象.每个线程都拥有一个独立的程序计数器.进程栈和一组 ...

  10. 软件项目第一次sprint评论

    软件项目第一次sprint评论 组名:天线宝宝四人组                                   姓名:高长志 1. 组名:9-652组 项目:炸弹人游戏 对于炸弹人游戏,首先 ...