关于背景图像透明，我们利用PNG图片支持半透明的特性来达到我们要的效果，除ie6-浏览器不支持PNG的透明外，其他的标准浏览器都支持，因此下面我们主要解决修复ie6不支持PNG透明的Bug。
互联网上解决IE6的透明PNG的方案也是多不胜数,从使用IE特有的滤镜或是expression,再到javascript+透明GIF替代.但是这些方法都有一个缺点,就是不支持CSS中 backgrond-position与background-repeat.
而我今天介绍DD_belatedPNG,只需要一个理由,就是它支持backgrond-position与background-repeat.这是其他js插件不具备的.同时DD_belatedPNG还支持a:hover属性,以及<img>.
这个js插件使用了微软的VML语言进行绘制,而其他多数解决PNG问题的js插件用的是AlphaImageLoader滤镜.
使用方法
1.在这里下载DD_belatedPNG.js文件.
2.在网页中引用,如下:
<!--[if IE 6]>
<script src="DD_belatedPNG.js" mce_src="DD_belatedPNG.js"></script>
<script type="text/javascript"><!
<!
/* EXAMPLE */
DD_belatedPNG.fix('.png_bg');
/* 将 .png_bg 改成你应用了透明PNG的CSS选择器,例如我例子中的'.trans'*/
// -->
3.有2种调用函数,一种是DD_belatedPNG.fix(),如上代码.另一种是fix(),这中方法需要在函数内指出css选择器名.
使用a:hover请留意
5-25更新:如果你也像jutoy同学一样想要用透明PNG作为a:hover时的背景图片,那么你需要留意你的代码,需要以”a:hover”来作为选择器.否则可能会导致无法成功.同时我也更新了demo,请需要的更新查看.接着我们看看正确的代码:
<!--[if IE 6]>
<script type="text/javascript" src="js/DD_belatedPNG.js" ></script>
<script type="text/javascript">
DD_belatedPNG.fix('.trans,.box a:hover');
</script>
<![endif]-->
下面是翻译自官方说明Known Issues的文字：
1、 vml语法针对的对象是DOM元素的子对象，因此你如果试图把fix()函数加在<body>标签上，那是没有用的；于是，你可能会想到：那 我在body里面套一个wrapper元素来代替<body>元素总该可以把？这确实能使fix()函数工作了，但这将会大大降低页面的性能 的。
2、此函数对<tr><td>标签支持的不是很好，所以请尽量不要把函数用在这上面。
3、这个脚本不支持backgroud-attchment:fixed
4、如果你想修复<img>标签的话，那请你加上visibity:hidden，尽管你加上了这段代码，还是会使得<img>标签元素变的不可点击，我仅想到一种解决方案，那就是用纯透明的gif图像来代替链接，至于代码我之后会加上的。
5、对于<INPUT type="image"/> 标签，脚本同样也不支持，需要您加上visibity:hidden，然后在背景中定义。
6、和alpha (opacity)滤镜比起来，这个文档宣称的“元素都可点击”效果不是怎么好，示例文件中时有失效的情况发生，到现在我还没有找到解决的方案。
8、 脚本是通过js字符串搜索检测png图片存在的，如果你的网页中有链接不是以“.png”结尾的话，你很不幸运，这会导致脚本出错的。我倒是希望有一个 “强制（以.png结尾）”选项存在，如果你需要的话，请让我知道（这条读起来有点绕口，我理解的意思是：请不要在你的网页代码中出项非png图片的 “.png”字样）
其他方案
在这里还是提供其他方案供大家参考.尽管我觉得DD_belatedPNG最好
- Unit PNG Fix
- ie7-js
- IE PNG Fix(通过.htc文件与.js文件+透明gif联合实现)
说明添加：齐鲁科技工作室
十六位颜色值和渐变滤镜颜色值转换工具
3971
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
