css之FILTER:progid:DXImageTransform.Microsoft.Gradient使用

在修改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。