網生@誌 | zEUS.'Blog

首页 » 网页美化 » 2008-08-3 »

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

Tag: , ,
字体大小:T | T

之前一直在用 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 滤镜写法如下:

1
2
3
4
*html #image-style {
	background-image: none;
	filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src="filename.png", sizingMethod="scale");
}

这里我写了一个实例:http://zeuscn.net/download/ie6png.html
使用 Firefox 和 IE7 浏览器看的话,2张图片没有区别,但使用 IE6 核心的浏览器看的话会发现第一张图片有白色背景——第一张图片是直接添加而没有使用滤镜。

1
2
3
4
5
6
7
#test {
	background:url(h2-bg.png) no-repeat;
	*background-image: none;
	*filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src="http://zeuscn.net/download/h2-bg.png", sizingMethod="scale");
	height:85px;
	width:66px;
}

我们可以从实例中的代码看到,由于 HTML 文件和图片 h2-bg.png 位于相同目录,所以这里的背景链接我是使用的相对地址。而下面的 CSS 滤镜我使用的是绝对地址。这里我为了兼容 Firefox IE6 和 IE7 我使用了 Hack 的写法:属性前添加 “*” ——只让 IE 核心的浏览器识别。

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

1
2
3
4
5
6
7
8
9
<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>

这个效果的具体样式是什么样的呢?嘿嘿,主题发布之日就能揭晓了~

zEUS.

« »

已经有20人发表了评论

  1. sofish on 2008年, 八月 4日 at 11:44 下午 said:

    dogorgod on 2008年, 八月 4日 at 11:02 下午 said:

    呵呵,兄弟的探索精神果然不凡,这个难题都攻破了。赞 😆

    爱折腾的人都是这样的,哈哈…

    正好想要,不过呢,GIF不是更小一点?

    GIF 背景透明的图片放到网页上会有白边…

    @GanGeGe:恩,我就是万不得已。。
    @willerce:恩,尽量少用

  2. 这样的技术文章只好先保留了,自己作主题时再拿出来瞅瞅哦~~ 😆

  3. 试过用这个方法.
    但是一旦用多了.就会很卡.
    比如vikiworks.com现在用得太多,一用IE进,就卡得不行.

  4. 专业的介绍,学习学习!

  5. 不到万不得以我是决不会把PNG放在网页上的……

  6. dogorgod on 2008年, 八月 4日 at 11:02 下午 said:

    呵呵,兄弟的探索精神果然不凡,这个难题都攻破了。赞 😆

    爱折腾的人都是这样的,哈哈…

    正好想要,不过呢,GIF不是更小一点?

  7. 呵呵,兄弟的探索精神果然不凡,这个难题都攻破了。赞 😆

  8. @Yacca:呵呵,因为正在做的 DiabloIII 主题的背景色要么渐变,要么背景复杂,所以只能寻求PNG的透明效果了 🙂

发表您的看法

TOP COMMENTS BOTTOM