您的位置：首页 > 其它

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

2013-08-19 10:59 302 查看
转http://runbing.me/archives/dd_belated-png-ie6-png.html?replytocom=6592

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



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

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

1
2
3
4
5
6

<!--[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’);”就大功告成了！

1
2
3
4
5
67
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24

< !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吧！
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 点击这里给我发消息
标签： 
相关文章推荐
新的分享
章节导航