Gradient Filter和AlphaImageLoader Filter
这两个属性是legend IE(IE6,7,8)中的渐变滤镜和透明滤镜,我们先详细介绍下这两个属性的用法,详情
可查看MSDN。
透明滤镜的使用方式很简单,只需在样式中定义
"filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(sProperties)"
即可。其中,关键部分就是sProperties。sProperties包括3部分,分别设置enabled使能,src图片url,sizingMethod
图片显示的大小。其中,sizingMethod设置为scale显示规定大小,设置为image则显示原大小。
设置滤镜的元素必须拥有布局,即该属性的hasLayout为true。拥有布局的方式很多,比如设置宽(高)度,设置
绝对定位,设置zoom:1等。
当然也可以针对一个元素设置多个滤镜。MSDN是这样描述多个滤镜如何作用的:
When multiple filters are applied to an object, each filter is processed in source order, with the
exception of procedural surfaces, which are computed first. To emphasize a filter‘s effect, place it last
in source order or on the object‘s parent. Always place transitions last in source order.
尽量把影响较为明显的滤镜放在最后一个。
渐变滤镜的使用方法和透明滤镜类似:
“filter:progid:DXImageTransform.Microsoft.Gradient(sProperties)”
sProperties包括了几个特别的属性,如enabled,EndColor(末尾颜色,不透明),EndColorStr(透明),StartColor,
StartColorStr(透明),GradientType(0为纵向渐变,1为横向渐变)。
其中,EndColorStr和StartColorStr的设置有一定的技巧,因为它代表有透明度的颜色,所以字符串的构成有两部分,
即: # + 透明度 + 颜色。颜色很好理解,6个16进制的数,透明度部分却需要计算:Math.floor(透明度 * 255).toString(16)。
比如RGBA(0,0,0,0.3)就需要设置为#4c000000。
设置滤镜属性
可以通过元素属性filters来获取设置的所有滤镜,针对每个滤镜,可以设置它的属性,比如Enabled,src,StartColorStr等等。
通过下面的例子可以很好的理解。
<!-- 透明滤镜的使用 --> <DIV ID="oDiv" STYLE="position:relative; height:250px; width:250px; filter:progid:DXImageTransform.Microsoft.AlphaImageLoader( src=‘http://pic31.nipic.com/20130727/12906030_080053134000_2.png‘, sizingMethod=‘scale‘);" > </DIV> <BR><BUTTON onclick="fnToggle(this);">Make Normal</BUTTON> <!-- 渐变滤镜的使用 --> <DIV ID="sDiv" STYLE="height:120px; color:green; filter: progid:DXImageTransform.Microsoft.gradient(enabled=‘false‘, startColorstr=#550000FF, endColorstr=#55FFFF00)" > A simple gradient </DIV> <BUTTON onclick="fnToggle2(this)">Add Gradient</BUTTON><BR/>
var bToggle = 1 var oDiv = document.getElementById("oDiv"), sDIv = document.getElementById("sDiv"); function fnToggle(oObj) { if (bToggle) { bToggle = 0; oDiv.filters(0).sizingMethod="image"; oObj.innerText=‘Enlarge It‘;} else { bToggle = 1; oDiv.filters(0).sizingMethod="scale"; oObj.innerText=‘Make Normal‘;} } function fnToggle2(oObj) { if (sDIv.filters(0).enabled){ sDIv.filters(0).enabled=‘false‘; oObj.innerText=‘Add Gradient‘;} else { sDIv.filters(0).enabled=‘true‘; oObj.innerText=‘Make Normal‘;} }
IE下滤镜的使用
1, 元素透明
legend IE不支持RGBA,可以通过渐变滤镜进行替换。
.rgba{ background:rgba(0, 0, 0, 0.3); filter:progid:DXImageTransform.Microsoft.Gradient(GradientType=0, StartColorStr=‘#4c000000‘, EndColorStr=‘#4c000000‘); }
这样,在现代浏览器采用RBGA透明,而在旧IE下使用渐进滤镜使其背景透明。
2, IE6下背景透明
都知道IE6不支持背景透明图片,但可以通过AlphaImageLoader进行替换。
.png_hack{ background-image: url(../img/the_image.png) !important; background-image: none; filter: none !important; filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src=‘img/the_image.png‘); }