IE滤镜及其使用技巧
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');
}IE6下PNG8与PNG32透明的测试请看这篇文章。