[转]PNG should be transparent perfectly in whichever browser
2008-04-28 18:00
477 查看
摘自:http://blog.ifcare.net/it/png-should-be-transparent-perfectly-in-whichever-browser.html
PNG格式的图片被越来越多的精工网页作坊们所受用。这源于它一个绝对优越:可透明,而且支持alpha通道(可变透明)。你也许会说,GIF也可以透明的;你也许还会问,什么是alpha通道。我不太喜欢用术语向我的朋友们解释专业名词,大家来看一下两张图片吧:
我画的月亮。
如果我想让天空的背景色与图片分离,通过用网页调用不到的色彩来显示月亮在不同颜色的天空中高悬,那毫无疑问图片中的天空必须是透明的,但我们看到,.gif格式的月亮边缘产生了锯齿,我所设计的那层朦胧光调被无情地压缩掉了,而.png很好的为我保存了下来。
OK,这就是alpha通道。一种包含色彩透明度的图片算法。
我本无心骗你,但我不得不承认,上面的那张PNG月亮是有背景色的,你右键保存一下就知道了,我把背景色与月亮合了层,其实它并不是透明的。
为什么要这么做呢?其实,如果所有人都用Firefox或Opera浏览器,我是无需偷梁换柱的,多此一举的根原,是因为IE6.0以及其之前的
IE浏览器是不支持PNG的透明格式的。也就是说,如果你的浏览器是IE6.0,即使我把图片做成透明,并在网页上配上深色背景,你看到的只能是一个坏了
的鸡蛋黄,而不是美轮美奂的月亮。
很让人庆幸的是,IE7是已经成功的改进了这一bug。但对全球来说,使用IE6的用户超过了50%,对于一个WebDesigner来说,我们必须有相应的措施!那就是:AlphaImageLoader滤镜。
先来熟悉一下AlphaImageLoader滤镜的语法:
filter : progid:DXImageTransform.Microsoft.AlphaImageLoader (enabled=bEnabled , sizingMethod=sSize , src=sURL )属性:
enabled : 可选项。布尔值(Boolean)。设置或检索滤镜是否激活。true |false
true : 默认值。滤镜激活。
false : 滤镜被禁止。sizingMethod : 可选项。字符串(String)。设置或检索滤镜作用的对象的图片在对象容器边界内的显示方式。
crop : 剪切图片以适应对象尺寸。
image : 默认值。增大或减小对象的尺寸边界以适应图片的尺寸。
scale : 缩放图片以适应对象的尺寸边界。
src : 必选项。字符串(String)。使用绝对或相对 url地址指定背景图像。假如忽略此参数,滤镜将不会作用。
这样一来,我们就可以通过在CSS中如下书写来调用这张PNG:
#moon {
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的:
html > body #moon {
background-repeat:no-repeat;background-image:url(images/moon.png);
}
写给IE的:
* #moon {filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(enabled=true,sizingMethod=image, src="images/moon.png")
}
这样一来,我们的任务就完成了。把所有的代码整理起来,最终写在CSS中的就是这样:
#moonpic {
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滤镜会导致该区域的链接和按钮无效,解决的办法是为链接或按钮添加:
position:relative;
这样一句代码,使其相对浮动。AlphaImageLoader无法设置背景的重复,所以对图片的切图精度会有很高的精确度要求。
PNG格式的图片被越来越多的精工网页作坊们所受用。这源于它一个绝对优越:可透明,而且支持alpha通道(可变透明)。你也许会说,GIF也可以透明的;你也许还会问,什么是alpha通道。我不太喜欢用术语向我的朋友们解释专业名词,大家来看一下两张图片吧:
PNG格式 | GIF格式 |
如果我想让天空的背景色与图片分离,通过用网页调用不到的色彩来显示月亮在不同颜色的天空中高悬,那毫无疑问图片中的天空必须是透明的,但我们看到,.gif格式的月亮边缘产生了锯齿,我所设计的那层朦胧光调被无情地压缩掉了,而.png很好的为我保存了下来。
OK,这就是alpha通道。一种包含色彩透明度的图片算法。
我本无心骗你,但我不得不承认,上面的那张PNG月亮是有背景色的,你右键保存一下就知道了,我把背景色与月亮合了层,其实它并不是透明的。
为什么要这么做呢?其实,如果所有人都用Firefox或Opera浏览器,我是无需偷梁换柱的,多此一举的根原,是因为IE6.0以及其之前的
IE浏览器是不支持PNG的透明格式的。也就是说,如果你的浏览器是IE6.0,即使我把图片做成透明,并在网页上配上深色背景,你看到的只能是一个坏了
的鸡蛋黄,而不是美轮美奂的月亮。
IE6.0下的透明PNG效果 |
先来熟悉一下AlphaImageLoader滤镜的语法:
filter : progid:DXImageTransform.Microsoft.AlphaImageLoader (enabled=bEnabled , sizingMethod=sSize , src=sURL )属性:
enabled : 可选项。布尔值(Boolean)。设置或检索滤镜是否激活。true |false
true : 默认值。滤镜激活。
false : 滤镜被禁止。sizingMethod : 可选项。字符串(String)。设置或检索滤镜作用的对象的图片在对象容器边界内的显示方式。
crop : 剪切图片以适应对象尺寸。
image : 默认值。增大或减小对象的尺寸边界以适应图片的尺寸。
scale : 缩放图片以适应对象的尺寸边界。
src : 必选项。字符串(String)。使用绝对或相对 url地址指定背景图像。假如忽略此参数,滤镜将不会作用。
这样一来,我们就可以通过在CSS中如下书写来调用这张PNG:
#moon {
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的:
html > body #moon {
background-repeat:no-repeat;background-image:url(images/moon.png);
}
写给IE的:
* #moon {filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(enabled=true,sizingMethod=image, src="images/moon.png")
}
这样一来,我们的任务就完成了。把所有的代码整理起来,最终写在CSS中的就是这样:
#moonpic {
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滤镜会导致该区域的链接和按钮无效,解决的办法是为链接或按钮添加:
position:relative;
这样一句代码,使其相对浮动。AlphaImageLoader无法设置背景的重复,所以对图片的切图精度会有很高的精确度要求。
相关文章推荐
- Java Warning:A Static Method Should Be Accessed In A Static Wa
- 当启动tomcat时出现tomcat setting should be set in tomcat preference page
- Buttons in button bars should be borderless
- 45 You want to disable resumable space allocation for all sessions. Which value should be assigned t
- This is probably a good time to review the order in which SELECT statement clauses are to be specified. Table 10.2 lists all the clauses we have learned thus far, in the order they must be used.
- A Static Method Should Be Accessed In A Static Way
- Error: Mock locations should only be requested in a test or debug-specific manifest file
- Repeated column in mapping for entity: XXpojo column: xx (should be mapped with insert="false" upda
- Assertion failure in -[MASViewConstraint addConstraintWithLayoutAttribute:],'Attributes should be ch
- interface xxx should be declared in a file called xxx.aidl
- Constants should not be defined in interfaces
- ECshop Strict Standards: Only variables should be passed by reference in
- 玩转JPA(一)---异常:Repeated column in mapping for entity/should be mapped with insert="false" update="fal
- 11 Things every Software Developer should be doing in 2012
- In C++, which of the following syntax can be used for instantiating an object named arr of the vecto
- QueryRunner requires a DataSource to be invoked in this way, or a Connection should be passed in
- root用户无法运行tor解决办法(The tor browser bundle should not be run as root )
- reloadData should be in main thread
- 解决办法:tomcat should be set in Tomcat Perferencr Pages
- AS-->AIDL: xxx should be declared in a file called xxx