AlphalmageLoader过滤器是IE浏览器专有的一个关于图片的属性,主要是为了解决半透明真彩色的PNG显示问题。
AlphalmageLoader的语法如下:
filter : progid:DXImageTransform.Microsoft.AlphaImageLoader ( enabled=bEnabled , sizingMethod=sSize , src=sURL )
属性:
enabled:是一个布尔值,表示是否激活滤镜功能,true表示激活,false表示禁止。
sizingMethod:设置或检索滤镜对图片所在的对象容器边界内显示方式。
O crop:表示会对图片进行剪切让其适应对象尺寸。
O image:增大或减小对象的尺寸边界以适应图片的尺寸,默认值。
O scale:通过缩放图片的方法来适应对象的尺寸边界。
src:表示背景图像的绝对或相对的URL地址。
下面是一个使用的实例:
站在性能分析的角度,不建议使用AlphalmageLoader过滤器主要原因如下:
1. 会增加内在的消耗,因为在加载过程不是按图像应用来加载的,而是按每个元素应用来加载的。
如果使用抓包工具或页面分析工具会发现,使用AlphalmageLoader过滤器请求的时候明显会更长,并且所消耗的内存也会明显增多。
2.这个过滤器在下载图片时会阻止浏览器进行渲染并且冻结浏览器。
test...test...
Web site
|
<script src="js/test.js"></script>
上面是一个测试页面,当加载到wap_logo.png(使用AlphaImageLoader过滤器处理)这个图片时,浏览器被冻结,此时浏览器无法动弹,冻结的时间超过1秒。
并且需要注意的是,并行下载不会被阻止,浏览器仍然在后台下载其他页面组件,但是没有渐进式渲染。
由于以上原因所以建议尽量避免使用AlphalmageLoader过滤器, 为了解决对这类透明度的过滤器的问题,通常还有以下两种方法:
1.使用VML透明度
VML是IE浏览器中关于PNG透明的另一种方法,
例如:定义一个div里面有一个vim空间
&nbsp; >
>
>
再声明一个VML名称空间:
在样式表中写以下内容:
v\:rect {
behavior:url(#default#VML);
width: 500px;
height: 500px;
display: block;
}
v\:fill {
behavior:url(#default#VML);
2.使用其它的过滤器
当然AlphaImageLoader并不是唯一存在的过滤器,另一种流行的是不透明度滤镜。
例如:如果需要对50%不透明度,那么可以使用以下属性。
O opacity: 0.5 (一般标准的用以)
O -moz-opacity: 0.5 (Mozilla和Firefox早期版本)
O filter: alpha(opacity=50)(对于IE浏览器)
标签:div透明度怎么设置