文档章节

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

donny945
 donny945
发布于 2014/02/26 14:50
字数 449
阅读 49
收藏 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
243
0
IE6 PNG透明终极解决方案

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

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

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

qii
2013/09/26
254
9

没有更多内容

加载失败,请刷新页面

加载更多

OSChina 周六乱弹 —— 早上儿子问我他是怎么来的

Osc乱弹歌单(2019)请戳(这里) 【今日歌曲】 @凉小生 :#今日歌曲推荐# 少点戾气,愿你和这个世界温柔以待。中岛美嘉的单曲《僕が死のうと思ったのは (曾经我也想过一了百了)》 《僕が死の...

小小编辑
48分钟前
74
1
Excption与Error包结构,OOM 你遇到过哪些情况,SOF 你遇到过哪些情况

Throwable 是 Java 中所有错误与异常的超类,Throwable 包含两个子类,Error 与 Exception 。用于指示发生了异常情况。 Java 抛出的 Throwable 可以分成三种类型。 被检查异常(checked Exc...

Garphy
今天
9
0
计算机实现原理专题--二进制减法器(二)

在计算机实现原理专题--二进制减法器(一)中说明了基本原理,现准备说明如何来实现。 首先第一步255-b运算相当于对b进行按位取反,因此可将8个非门组成如下图的形式: 由于每次做减法时,我...

FAT_mt
昨天
6
0
好程序员大数据学习路线分享函数+map映射+元祖

好程序员大数据学习路线分享函数+map映射+元祖,大数据各个平台上的语言实现 hadoop 由java实现,2003年至今,三大块:数据处理,数据存储,数据计算 存储: hbase --> 数据成表 处理: hive --> 数...

好程序员官方
昨天
7
0
tabel 中含有复选框的列 数据理解

1、el-ui中实现某一列为复选框 实现多选非常简单: 手动添加一个el-table-column,设type属性为selction即可; 2、@selection-change事件:选项发生勾选状态变化时触发该事件 <el-table @sel...

everthing
昨天
6
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部