css——颜色渐变兼容

css——颜色渐变兼容

background: -webkit-linear-gradient(right,#9EC234 0%,#539748 100%);
 background: -moz-linear-gradient(right,#9EC234 0%,#539748 100%);
 background: -o-linear-gradient(right,#9EC234 0%,#539748 100%);
 background: linear-gradient(to right,#9EC234 0%,#539748 100%);
 filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=#9EC234,endColorstr=#539748,GradientType=1);

filter详解
在修改UI-UE工作的时候遇到一个问题，一个样式在firefox上正常的在IE上不正常经过查找发现是当时的开发人员只实现了firefox的逐渐变色效果，却没有去实现IE的效果，后来查找了一些资料使用IE的滤镜来完善相应的页面，并找到了rgba和16进制颜色转变的方法

火狐下的样式
background-image: -moz-linear-gradient(rgba(255, 255, 255, 0.7) 0%, rgba(255, 255, 255, 0) 100%);

IE下：
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=’#B2FFFFFF’, endColorstr=’#00FFFFFF’,GradientType=0 ); /* IE6-9 */

语法：

filter:progid:DXImageTransform.Microsoft.Gradient(enabled=bEnabled,startColorStr=iWidth,endColorStr=iWidth) 

属性：
enabled:可选项。布尔值(Boolean)。设置或检索滤镜是否激活。 true | false
　　true: 默认值。滤镜激活。
　　false:滤镜被禁止。

startColorStr:可选项。字符串(String)。设置或检索色彩渐变的开始颜色和透明度。
　　其格式为 #AARRGGBB 。 AA 、 RR 、 GG 、 BB 为十六进制正整数。取值范围为 00 - FF 。 RR 指定红色值， GG 指定绿色值， BB 指定蓝色值，参阅 #RRGGBB 颜色单位。 AA 指定透明度。 00 是完全透明。 FF 是完全不透明。超出取值范围的值将被恢复为默认值。
　　取值范围为 #FF000000 - #FFFFFFFF 。默认值为 #FF0000FF 。不透明蓝色。
EndColorStr:可选项。字符串(String)。设置或检索色彩渐变的结束颜色和透明度。参阅 startColorStr 属性。默认值为 #FF000000 。不透明黑色。
特性：
Enabled:可读写。布尔值(Boolean)。参阅 enabled 属性。
GradientType:可读写。整数值(Integer)。设置或检索色彩渐变的方向。1 | 0
　　1:默认值。水平渐变。
　　0:垂直渐变。
StartColorStr:可读写。字符串(String)。参阅 startColorStr 属性。
StartColor:可读写。整数值(Integer)。设置或检索色彩渐变的开始颜色。 取值范围为 0 - 4294967295 。 0 为透明。 4294967295 为不透明白色。
EndColorStr:可读写。字符串(String)。设置或检索色彩渐变的结束颜色和透明度。参阅 startColorStr 属性。默认值为 #FF000000 。不透明黑色。
EndColor:可读写。整数值(Integer)。设置或检索色彩渐变的结束颜色。 取值范围为 0 - 4294967295 。 0 为透明。 4294967295 为不透明白色。当在脚本中使用此特性时，也可以用十六进制格式： 0xAARRGGBB 。
说明：
在对象的背景和内容之间显示定制的色彩层。
当此效果通过转变显示时，在渐变册色彩层之上的文本程序性的初始化为透明的，当色彩渐变实现后，文本颜色会以其定义的值更新。
示例：

#idDiv{
position:absolute;
 left:140px;
  height:400;
   width:400;
filter:progid:DXImageTransform.Microsoft.gradient(enabled='false',startColorstr=#550000FF, endColorstr=#55FFFF00) ;
}

#idDiv{
position:absolute; 
left:140px; 
height:400; 
width:400;
filter:progid:DXImageTransform.Microsoft.gradient() ;
} 

具体使用

<table border=1 width=100%> 
<tr> 
<td STYLE="FILTER:progid:DXImageTransform.Microsoft.Gradient(gradientType=1,startColorStr='#ffffff',endColorStr='#ff0000')"> </td> 
</tr> 
</table>

滤镜实用：

哀悼日，各网站页面全部用黑白色，用以下滤镜！！
为方便站点哀悼，特提供css滤镜代码，以表哀悼。以下为全站CSS代码。

html {
 filter:progid:DXImageTransform.Microsoft.BasicImage(grayscale=1);
  }

使用方法：这段代码可以变网页为黑白，将代码加到CSS最顶端就可以实现素装

如果网站没有使用CSS，可以在网页/模板的HTML代码和 之间插入：

html{
filter:progid:DXImageTransform.Microsoft.BasicImage(grayscale=1);
}

有一些站长的网站可能使用这个css 不能生效，是因为网站没有使用最新的网页标准协议

http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
http://www.w3.org/1999/xhtml">

请将网页最头部的替换为以上代码。

有一些网站FLASH动画的颜色不能被CSS滤镜控制，可以在FLASH代码的和之间插入：

最简单的把页面变成灰色的代码是在head 之间加

html {
    FILTER: gray
}

DXImageTransform.Microsoft.gradient滤镜里的startColorstr参数值是#AARRGGBB形式的， 其中的AA是代表不透明度的十六进制，00表示完全透明，FF就是全不透明，化成十进制的范围就是0~255，剩下的RRGGBB就是颜色的十六进制代 码。例子中background: rgba(125, 0, 0, .3);表示的是30%不透明度的红色背景。

把30%的不透明度转换成十六制呢的方法如下：先计算#AA的的十进制x，x/255 = 3/10，解得x=3*255/10，然后再把x换算成十六进制，约等于4B。