标签：
这两个属性是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‘;} }
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‘); }
标签：
原文地址：http://www.cnblogs.com/accordion/p/4248413.html
