IE6支持PNG格式图片的CSS滤镜写法

核心提示：之前一直在用 gif 图片或者用和背景色相同的 jpg 图片回避 IE6 不支持 PNG 图片背景色透明的 BUG，不过在做大菠萝3（Diablo III）主题时不愿放弃自己一个比较酷的 Idea，IE6支持PNG格式图片的CSS滤镜写法，所以我还是决定要解决这个 BUG，网上关于解决 IE6 这个 BUG 的方法很多

之前一直在用 gif 图片或者用和背景色相同的 jpg 图片回避 IE6 不支持 PNG 图片背景色透明的 BUG，不过在做大菠萝3（Diablo III）主题时不愿放弃自己一个比较酷的 Idea，所以我还是决定要解决这个 BUG。
网上关于解决 IE6 这个 BUG 的方法很多，有用 JS 的，也有用 IE6 的 CSS 滤镜的。稍微看了一下，JS 的方法仅用于单个图片的效果，但若拿图片作背景则不行。CSS 滤镜的写法则简单很多，也能用作背景，但还是存在一个问题，图片的地址只能使用“绝对地址”，而我们在模板的 CSS 样式表里使用的大多是相对地址，虽然也可以使用绝对地址，但是不同的用户使用该模板的话就必须修改其绝对地址，对于不懂 CSS/HTML 的人来说，无疑这是一道“坎”。不过后来猫猫的一句话让我如梦初醒——可以把这段 CSS 写在 head 里，这样就可以用 WordPRess 自己的 php 语句来调用绝对地址了！

让 IE6 支持 PNG 图片背景透明的 CSS 滤镜写法如下：

*html #image-style {
background-image: none;
filter:progid:DXImageTransform.Microsoft.AlphaImageLoader
(src="http://www.cncms.com/filename.png", sizingMethod="scale");
}
这里我写了一个实例：http://zeuscn.net/download/ie6png.html
使用 Firefox 和 IE7 浏览器看的话，2张图片没有区别，但使用 IE6 核心的浏览器看的话会发现第一张图片有白色背景——第一张图片是直接添加而没有使用滤镜。

#test {
background:url(h2-bg.png) no-repeat;
*background-image: none;
*filter:progid:DXImageTransform.Microsoft.AlphaImageLoader
(src="http://tech.cncms.com/tech/UploadPic/2010910/2010910192653885.png", sizingMethod="scale");
height:85px;
width:66px;
}
我们可以从实例中的代码看到，由于 HTML 文件和图片 h2-bg.png 位于相同目录，所以这里的背景链接我是使用的相对地址。而下面的 CSS 滤镜我使用的是绝对地址。这里我为了兼容 Firefox IE6 和 IE7 我使用了 Hack 的写法：属性前添加 “*” ——只让 IE 核心的浏览器识别。

那么在 Wordpress 模板的 head 标签内的 CSS 样式表调用之后，添加了下面的样式代码来绕过在样式表内使用绝对地址的问题：

<link href="<?php bloginfo('stylesheet_directory'); ?>/style.css" rel="stylesheet" type="text/css" />
<style>
.post .title-bg {
height:85px;
width:65px;
*filter:progid:DXImageTransform.Microsoft.AlphaImageLoader
(src="<?php bloginfo('stylesheet_directory'); ?>/images/h2-bg.png", sizingMethod="scale");
position:absolute;
}
</style>
这个效果的具体样式是什么样的呢？嘿嘿，主题发布之日就能揭晓了～