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