文档章节

使用DD_belatedPNG让IE6支持PNG透明图片

donny945
 donny945
发布于 2014/02/26 14:50
字数 449
阅读 47
收藏 0

众所周知IE6不支持透明的PNG图片,而PNG图片在Web设计方面表现力上,具有其 它图形格式所达不到的效果,IE6这一致命缺陷极大地限制了Web设计的创意发挥。虽然解决IE6的透明PNG的方法也很多,从使用IE特有的滤镜或是 e­xpression,再到javascript+透明 GIF替代.但是这些方法都有一个缺点,就是不支持CSS中backgrond-position与background-repeat属性。而使用 DD_belatedPNG.js可完美的解决IE6下PNG图片透明问题,并且支持backgrond-position与background- repeat. 这是其他方法所不具备的,同时DD_belatedPNG还支持a:hover属性,以及<img>。我们的网站就加入了 DD_belatedPNG处理导航PNG透明图片,使其在不同浏览器下保持相同的外观。

使用方法:

首先下载JS文件

0.0.8a.js (未压缩版本)


0.0.8a-min.js (压缩版)

之后在页面中引用代码:

1<!–[if IE 6]>
2<script type=”text/javascript” src=”下载下来的JS路径”></script>
3<script>
4DD_belatedPNG.fix(‘CSS选择器, 应用类型’);
5</script>
6<![endif]–>

引用函数是 DD_belatedPNG.fix() , 括号里分别填写应用PNG的CSS选择器(可使用ID选择器和类选择器)和应用类型(分为img和background两种)。

如DD_belatedPNG.fix(‘#box-one, img’) 或者 DD_belatedPNG.fix(‘.header, background’) 等。

这些可以简写成 DD_belatedPNG.fix(‘#box-one, .header, img,background’);  。

更多选择器的如 DD_belatedPNG.fix(‘#box-one, .header,#footer,.box-two a:hover, img,background’);  等等。

另外,为解决IE6下背景图闪烁,可以在页面中添加如下脚本

复制代码

1 <!–[if IE 6]>
2 <script type=”text/javascript”>
3 // <![CDATA[
4 if((window.navigator.appName.toUpperCase().indexOf("MICROSOFT")>=0)&&(document.execCommand))
5 try{
6 document.execCommand("BackgroundImageCache", false, true);
7  }
8 catch(e){}
9 // ]]>
10 </script>
11 <![endif]–>

复制代码

原文链接:http://zmingcx.com/dd_belatedpng-solve-png-images-under-ie6-transparent-application-tutorial.html


本文转载自:

donny945
粉丝 9
博文 201
码字总数 33875
作品 0
海淀
程序员
私信 提问
IE6 png图片实现半透明的方法

IE6中支持PNG半透明图片完美解决方法-divcss5亲測 从IE7及IE7以上版本号都支持PNG半透明格式图片,而只有IE6不支持png格式透明图片,而GIF半透明效果不及png半透明格式图片,由此我们迫不及待...

云栖希望。
2017/12/04
0
0
IE6 png图片实现半透明的方法

IE6中支持PNG半透明图片完美解决方法-divcss5亲測 从IE7及IE7以上版本号都支持PNG半透明格式图片,而只有IE6不支持png格式透明图片,而GIF半透明效果不及png半透明格式图片,由此我们迫不及待...

云栖希望。
2018/01/06
0
0
IE6png图片不透明,等问题处理

为了在浏览器中显示更好的处理效果,一般会设置 html 元信息(meta)的http-equiv <meta http-equiv="X-UA-Compatible" content="IE=Edge,chrome=1.0"/> 这句代码指示浏览器按照当前最新浏览器......

IamOkay
2014/10/28
0
0
IE6 PNG透明终极解决方案

方案1 - 滤镜解决方案: 介绍:滤镜从IE4.0被微软正式引入,所以我们可以使用滤镜解决IE6的PNG透明问题,滤镜不仅可以实现目前CSS3的一些旋转效果而且还可以引入图片。注意:此方法在部分版本...

Kinsey
2014/12/22
0
0
ie6下png去背景

今天用 DD_belatedPNG.js做ie6下的png图片去背景,无论如何,都去不掉。无奈去官网下了最新版本的 DD_belatedPNG,还是不行。把图片的其他属性全删了,只留下一个src属性,用DD_belatedPNG.f...

qii
2013/09/26
253
9

没有更多内容

加载失败,请刷新页面

加载更多

springboot配置百度UEditor 富文本详解

富文本简介 UEditor是由百度web前端研发部开发所见即所得富文本web编辑器,具有轻量,可定制,注重用户体验等特点,开源基于MIT协议,允许自由使用和修改代码... 准备工作 ueditor需要单独文...

wotrd
昨天
1
0
mysql 5.7之my.cnf配置大全

[client]port = 3306socket = /tmp/mysql.sock[mysqld]###############################基础设置######################################Mysql服务的唯一编号 每个mysql服务...

Online_Reus
昨天
2
0
MAVEN打包时引入外部链接的包

1.项目引入了ORACLE的jar包,MAVEN配置如下 2.打jar包的时候需要指定下main入口函数mainClass <dependency> <groupId>com.oracle</groupId> <artifactId>ojdbc6</artifactId> ......

Cobbage
昨天
1
0
rror: Default interface methods are only supported starting with Android N (--min-api 24): java.io.

项目运行的时候,如果报错 Error: Default interface methods are only supported starting with Android N (--min-api 24): java.io.InputStream org.apache.poi.sl.usermodel.ObjectShape.......

chenhongjiang
昨天
2
0
聊聊spring cloud openfeign的Targeter

序 本文主要研究一下spring cloud openfeign的Targeter Targeter spring-cloud-openfeign-core-2.2.0.M1-sources.jar!/org/springframework/cloud/openfeign/Targeter.java interface Targe......

go4it
昨天
2
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部