DD_belatedPNG 与 unitpngfix 两种解决 IE6 中 PNG 图片透明问题方案横向对比
来源:互联网 发布:《算法》下载 编辑:程序博客网 时间:2024/04/29 02:31
虽然 IE6 骂声不断,但是仍然还有不少的市场份额。而在网页中,png 文件体积小、无锯齿、透明度好而被广泛使用。当这两件事情碰在一起,问题就来了,IE6 不支持 PNG 透明图片,它会把透明的部分显示成白色的。
有问题就会有解决方法,可以使用早期 IE6 支持的滤镜来实现透明效果,有些牛人就根据这个原理进行了封装,做成了 JS 来使用。所以,我们只需要调用他们编写 JS 文件即可。在网上有众多解决这种问题的方法和插件,但是实际上目前有这两种方式比较有效,那就是 DD_belatedPNG.js 和 unitpngfix.js 这两种方法。本文就是简单介绍一下使用方法和特点,然后将其进行一个对比。
DD_belatedPNG.js 方法
DD_belatedPNG.js 这个插件功能非常强大,强大的背后就是复杂的使用方法和体积大小。首先要下载这个 JS 文件,然后引用到页面中,之后就要为其填写配置一些参数。通常要用两个参数,一个是 CSS 选择器,使用这个选择需要处理的层或者图片,另一个是类型,就是这个图片是作为 img 图片还是 background 背景图片来使用的。插件体积的话,压缩版也有7KB。
知更鸟已经写了一篇比较简单的使用方法:使用DD_belatedPNG让IE6支持PNG透明图片
官方的英文版提供了更加详细的教程:点击这里
unitpngfix.js 方法
unitpngfix.js 这个插件使用起来非常简单,不需要配置什么参数,只需要引入JS插件即可。而且非常小巧,只有2KB,不需要进行任何配置。但是要注意,JS 文件里面还要配置一个小图片地址,这个图片就是一个1像素的透明图片,是这个插件必须的素材。所以你需要上传或者在网上找个,然后填写进去。
更加详细的使用方法请看官方页面:点击这里
上面介绍两种方法的两种方法的使用方法,下面我们从实际应用来对比一下。
实践对比测试
介绍的再怎么好,也要通过实践检验。下面就来动手做个 Demo 亲自测试一下使用过程和效果。Demo 页面非常简单,就是一个带有透明 png 背景图片的 div ,并且把背景图片放在了右下角,关键代码:
div{width:400px;height:400px;margin:20px;background:url(222.png) bottom right no-repeat;border:1px solid #000;}
打开之后的效果是正常的
现在我们启动伟大的经常无条件崩溃的 ieTest ,使用 IE6 来加载这个页面
成功的显示出了白色的背景,哦也!
使用 DD_belatedPNG.js 方法:先引用 JS 文件,然后设置上属性和参数。具体代码如下:
<!–[if IE 6]><script src="DD_belatedPNG_0.0.8a-min.js"></script><script>DD_belatedPNG.fix('div,background');</script><![endif]–>
刷新之后,成功修正!
使用 unitpngfix.js 方法:上传并且设置好小图片,然后引用 JS 文件。具体代码如下:
<script src="unitpngfix.js"></script>
但是刷新之后,背景图片却出不来了。当然这个与 IEtest 的不稳定也有关,在原生IE6下测试应该不会出现这种情况(未测试),在之前的实际使用中,偶尔会出现这种情况。大部分时候,作为背景图片会跑到左上方,因为 unitpngfix 对 background 的属性支持不太好(官方有提到)。
用户体验对比
DD_belatedPNG.js 的使用效果比较好,达到了要求,但是使用起来比较繁琐,需要针对性的对要使用的图片添加参数,这样就不便于后期的修改。当然,可以新建一个专用的类,为所有需要处理的图片,添加这个类即可,总体上也是比较方便的。此外体积也稍大。
unitpngfix.js 使用起来非常简单,只需要引入这个文件,就可以对页面中所有的 png 图片进行处理。但是对于原图片的 background 属性支持不太好。尤其对 background-position、background-repeat 等属性,容易失效。而且有时不太稳定(未在原生IE6下测试)。体积较小。
从效果出发,自然是选择 DD_belatedPNG.js ,但 unitpngfix.js 也是有价值的。如果要你为一个包含很多 png 图片的页面做兼容处理,你是选择使用 DD_belatedPNG.js ,为图片一一添加属性或者把选择器一一填上,还是直接引用一个 unitpngfix.js ,忍受一点效果的缺失?
源地址:blog.wpjam.com/m/dd_belatedpng-and-unitpngfix/
官网地址:www.dillerdesign.com/experiment/DD_belatedPNG/- DD_belatedPNG 与 unitpngfix 两种解决 IE6 中 PNG 图片透明问题方案横向对比
- DD_belatedPNG透明,解决IE6不支持PNG绝佳方案
- DD_belatedPNG,解决IE6不支持PNG绝佳方案
- DD_belatedPNG,解决IE6不支持PNG绝佳方案
- 使用DD_belatedPNG让IE6支持PNG透明图片 及IE6下背景图闪烁问题的解决方法
- DD_belatedPNG解决IE6下PNG不透明问题
- 解决IE6 png图片透明问题
- 解决IE6支持PNG图片透明问题
- 使用DD_belatedPNG让IE6支持PNG透明图片
- 使用DD_belatedPNG让IE6支持PNG透明图片
- 使用DD_belatedPNG让IE6支持PNG透明图片
- 使用DD_belatedPNG让IE6支持PNG透明图片
- 使用DD_belatedPNG让IE6支持PNG透明图片
- IE6支持透明PNG图片解决方案:DD_belatedPNG.js
- IE6支持透明PNG图片解决方案:DD_belatedPNG.js
- 使用DD_belatedPNG让IE6支持PNG透明图片
- 解决IE6的PNG透明JS插件 DD_belatedPNG
- 解决IE6下PNG不透明问题—DD_belatedPNG的完美方案
- 安卓的异步下载网络图片
- Plsql Developter 快捷设置
- Asp.net MVC 视图之公用代码
- 环保App,绿色从手中开始
- 关于Debug和Release之本质区别的讨论
- DD_belatedPNG 与 unitpngfix 两种解决 IE6 中 PNG 图片透明问题方案横向对比
- 【问题汇总】Android NDK编译时版本异常的问题
- 泛型基础
- Memcache 详解
- Appium官网Introduction
- android界面切换的方法
- wireshark通过无线网卡抓包错误及解决
- 关于Linux和Windows的换行符
- ffmpeg 常用命令行 (视频->转码)