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透明的测试请看这篇文章。