现在的位置: 首页 > 综合 > 正文

IE6下PNG图像透明完美解决方案–DD_belatedPNG

2013年11月11日 ⁄ 综合 ⁄ 共 940字 ⁄ 字号 评论关闭

今天天外飞仙起早了,收集个插件分享大家—DD_belatedPNG插件,可以让图像透明,这个方案只需要一个理由,就是它支持backgrond-position与background-repeat.这是其他js插件不具备的.同时DD_belatedPNG还支持a:hover属性,以及<img>。
原理
这个js插件使用了微软的VML语言进行绘制,而其他多数解决PNG问题的js插件用的是AlphaImageLoader滤镜.
使用方法
1.在这里下载DD_belatedPNG.js文件.

http://dillerdesign.com/experiment/DD_belatedPNG/#download(里面有完整版本和压缩版本)

2.用下载下来的js调用
<script type=”text/javascript” src=”下载下来的JS路径”></script>
之后在使用PNG的页面中引用代码,由于是针对IE6处理的,所以在外围加上IE6的条件注释,以便区别于其他浏览器。完整的代码如下:
<!–[if gte IE 6]>
<script type=”text/javascript” src=”下载下来的js路径”></script>
<script type=”text/javascript”> DD_belatedPNG.fix(‘CSS选择器, 应用类型’); </script>
<![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’); 等等。
博主友情提示:要注意上面选择器的标点要在英文的状态下,不然是没有效果的哦!

抱歉!评论已关闭.