Microsoft.AlphaImageLoader滤镜的使用注意事项

今天做东方付通的门户使用到了png的背景,在ie6下 出现了连接不能用的情况,这才深入的看了看IE下的Microsoft.AlphaImageLoader滤镜的使用,实际操作中需要注意以下的内容：
1、区分浏览器并阻止非IE类浏览器加载滤镜。

　　　 FF,OP可以正常支持png图片所以需要将这个滤镜屏蔽。可以使用子选择器（ >  ）指定背景。而IE系列的则可以使用只有IE才能识别的通配符（ * ）。或者直接使用important!区分

例1：

#div1 {

height: 600px;

width: 260px;

padding: 20px;

background-repeat: repeat;

}/*共用*/

html>body #div1 {

background-repeat: repeat;background-image: url(1.png);

}/*FF,OP使用的背景*/

* #div1 {filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(sizingMethod=”scale”, src=”1.png” mce_src=”1.png”)

}/*IE*/

例2：

#div1 {

 background:url(images/1.png) top no-repeat!important;

 background:url(images/blank.gif) top left no-repeat;

 filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src=”images/1.png”,sizingMethod=”scale”);

 height: 600px;

 width: 260px;

 padding: 20px;

 }

2、链接。

　　　 AlphaImageLoader滤镜会导致该区域的链接和按钮无效，一般情况下的解决办法是为链接或按钮添加：position:relative使其相对浮动。

　　　 要注意的是，当加载滤镜的区域的父层有position:absolute绝对定位的时候使用position:relative也不能使链接复原。建议改用浮动（float）。建议使用浮动办法处理。

---

一、从上往下渐变

body{

FILTER: progid:DXImageTransform.Microsoft.Gradient(gradientType=0,startColorStr=#ffffff,endColorStr=#000000);

}

二、从左上至右下渐变

body{

FILTER: Alpha( style=1,opacity=25,finishOpacity=100,

startX=50,finishX= 100,startY=50,finishY=100);

background-color: skyblue;

}

三、从左往右渐变

body{

FILTER: progid:DXImageTransform.Microsoft.Gradient(gradientType=1,startColorStr=#ffffff,endColorStr=#000000);

}

四、从上往下渐变

style="filter:progid:DXImageTransform.microsoft.gradient(gradienttype=0,startColorStr=blue,endColorStr=white);"