DD_belatedPNG: 解决IE6下半透明png的给劲儿方法

最新推荐文章于 2020-10-07 20:46:22 发布

fendou4533

最新推荐文章于 2020-10-07 20:46:22 发布

阅读量898

点赞数

分类专栏： js css jquery html

js 同时被 3 个专栏收录

63 篇文章 0 订阅

订阅专栏

html

55 篇文章 0 订阅

订阅专栏

css

36 篇文章 0 订阅

订阅专栏

转http://runbing.me/archives/dd_belated-png-ie6-png.html?replytocom=6592

一直以来，让前端设计师比较头疼的一个问题就是IE6对Alpha透明PNG的处理方式，如下图所示，在IE6下，PNG图片的透明部分，被无耻的蒙上一片灰色，这是无法让人容忍的！每当制作页面的时候都对PNG图片的选择倍加纠结，甚至有时候也不得不用GIF去替代PNG，为的是那些还占有大份额“忠于”IE6浏览器的用户！

ie6和其他浏览器对透明png的处理对比

这问题也是老生常谈了，网络上也有很多解决方法，但是都不算完美。直到昨天请教公司明哥才知道这样一个接近完美的方法——DD_belatedPNG！它使用微软的VML语言对PNG图片进行重新绘制，以达到半透明的效果，与其他方法区别最大的一个特性就是能支持background-position和background-repeat属性。

DD_belatedPNG的使用方法很简单，首先去官官网或::点击这里::下载JS文件，然后在页面上插入如下代码（注意JS的路径哦），然后在“DD_belatedPNG.fix(‘有PNG图片的类名或标签’);”汉字部分填上有半透明PNG图片的CSS类名或IMG标签即可。

<!--[if IE 6]>
<script src="DD_belatedPNG.js"></script>
<script>
DD_belatedPNG.fix('.png_bg');
</script>
< ![endif]-->

比如有如下这样一个页面，为类名为“test”的DIV标签设置了一个“test.png”的图片当背景，并且插入了一个“test.png”的图片文件，那么只需要在如上所示的JS片段中改写“DD_belatedPNG.fix(‘.test,img’);”就大功告成了！

< !DOCTYPE HTML>
<html>
<head>
<title>IE6 png</title>
<style type="text/css">
<!--
.test{
	background: url(images/test.png) no-repeat;
}
-->
</style>
<!--[if IE 6]>
<script src="DD_belatedPNG.js"></script>
<script>
	DD_belatedPNG.fix('.test,img');
</script>
< ![endif]-->
</head>
 
<body>
	<div class="test"></div>
	<img src="images/test.png" width="300" height="100" />
</body>
</html>

当然需要注意的是DD_belatedPNG虽然堪称完美却也有不足的地方，如对不支持<tr>和<td>标签、不支持background-position：fixed等，官方页面上有详细说明，不过能做到这种程度也算很了不起了，总算找到一个较为完美给劲儿的解决方案，Enjoy it吧！

fendou4533

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
DD_belatedPNG: 解决IE6下半透明png的给劲儿方法

转http://runbing.me/archives/dd_belated-png-ie6-png.html?replytocom=6592一直以来，让前端设计师比较头疼的一个问题就是IE6对Alpha透明PNG的处理方式，如下图所示，在IE6下，PNG图片的透明部分，被无耻的蒙上一片灰色，这是无法让人容忍的！每当制作页面的时候都对PNG图片的选择倍加纠结，甚至有时候也不得不用GIF
复制链接

扫一扫