[转]PNG should be transparent perfectly in whichever browser
2008-04-28 18:00 清炒白菜 阅读(345) 评论(0) 编辑 收藏 举报摘自:http://blog.ifcare.net/it/png-should-be-transparent-perfectly-in-whichever-browser.html
PNG格式的图片被越来越多的精工网页作坊们所受用。这源于它一个绝对优越:可透明,而且支持alpha通道(可变透明)。你也许会说,GIF也可以透明的;你也许还会问,什么是alpha通道。我不太喜欢用术语向我的朋友们解释专业名词,大家来看一下两张图片吧:
![]() |
![]() |
|
PNG格式 | GIF格式 |
我画的月亮。
如果我想让天空的背景色与图片分离,通过用网页调用不到的色彩来显示月亮在不同颜色的天空中高悬,那毫无疑问图片中的天空必须是透明的,但我们看到,.gif格式的月亮边缘产生了锯齿,我所设计的那层朦胧光调被无情地压缩掉了,而.png很好的为我保存了下来。
OK,这就是alpha通道。一种包含色彩透明度的图片算法。
我本无心骗你,但我不得不承认,上面的那张PNG月亮是有背景色的,你右键保存一下就知道了,我把背景色与月亮合了层,其实它并不是透明的。
为什么要这么做呢?其实,如果所有人都用Firefox或Opera浏览器,我是无需偷梁换柱的,多此一举的根原,是因为IE6.0以及其之前的 IE浏览器是不支持PNG的透明格式的。也就是说,如果你的浏览器是IE6.0,即使我把图片做成透明,并在网页上配上深色背景,你看到的只能是一个坏了 的鸡蛋黄,而不是美轮美奂的月亮。
![]() |
IE6.0下的透明PNG效果 |
很让人庆幸的是,IE7是已经成功的改进了这一bug。但对全球来说,使用IE6的用户超过了50%,对于一个WebDesigner来说,我们必须有相应的措施!那就是:AlphaImageLoader滤镜。
先来熟悉一下AlphaImageLoader滤镜的语法:
enabled : 可选项。布尔值(Boolean)。设置或检索滤镜是否激活。true |false
true : 默认值。滤镜激活。
false : 滤镜被禁止。sizingMethod : 可选项。字符串(String)。设置或检索滤镜作用的对象的图片在对象容器边界内的显示方式。
crop : 剪切图片以适应对象尺寸。
image : 默认值。增大或减小对象的尺寸边界以适应图片的尺寸。
scale : 缩放图片以适应对象的尺寸边界。
src : 必选项。字符串(String)。使用绝对或相对 url地址指定背景图像。假如忽略此参数,滤镜将不会作用。
这样一来,我们就可以通过在CSS中如下书写来调用这张PNG:
height: 155px;
width: 155px;
background-repeat: repeat;
filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(enabled=true,sizingMethod=scale, src="images/moon.png")
}
这样,我们的IE6就可以完美的显示透明PNG了。可是,当我们用FF打开页面时,图片将不显示了。这是因为,FF浏览器并不支持AlphaImageLoader滤镜。
如果此时你想尝试一下在CSS中的代码后面追加一句“background-image:url(images/moon.png);”的话,再回去看看IE6吧,你把它又给搞晕了:新的背景会覆盖在滤镜的背景之上,导致滤镜显示无效。
这时候就用到IE和FF对CSS读取的区别特性了:
Firefox、Opera等完全支持PNG透明图片的浏览器也支持子选择器(>),而IE不识别(包括IE7),但IE家族识别通配符(*),这是只有IE家族才具备的特性。所有我们可以通过这来定义CSS。代码如下:
写给FF和OPERA的:
background-repeat:no-repeat;background-image:url(images/moon.png);
}
写给IE的:
}
这样一来,我们的任务就完成了。把所有的代码整理起来,最终写在CSS中的就是这样:
width:155px;
height:155px;
}
html > body #moonpic {
background-image:url(images/moon.png);
background-repeat:no-repeat;
}
* #moonpic {filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(enabled=true,sizingMethod=image, src="images/moon.png")}
需要注意的是:AlphaImageLoader滤镜会导致该区域的链接和按钮无效,解决的办法是为链接或按钮添加: