大家還記得361源碼前面給大家介紹的悼念日特效《CSS實現頁面全灰色》的實現辦法嗎？很多朋友看了文章后給361源碼留言，因此也引申出了今天這篇文章：DIV+CSS元素透明的兩種方法介紹。
在網頁前端設計中，透明特效的應用往往可以很大地提升網頁視覺效果，一般實現透明的方法是添加 opacity 樣式，這也是我們最為常用的實現透明的方法。
一、opacity樣式實現元素透明
代碼如下：
.transparent_class {filter:alpha(opacity=50);-moz-opacity:0.5;-khtml-opacity: 0.5;opacity: 0.5; }代碼解析：
opacity: 0.5; 這是最重要的，因為它是CSS標準.該屬性支持Firefox, Safari和 Opera。
filter:alpha(opacity=50); 這個是為IE6設的，可取值在0-100，其它三個0到1。
-moz-opacity:0.5; 這個是為了支持一些老版本的Mozilla瀏覽器。
-khtml-opacity: 0.5; 這個為了支持一些老版本的Safari瀏覽器。
在使用opacity屬性控制透明的時候，要注意透明度的繼承問題：我們額外為子元素指定其他透明度也是無效的。
這點很不友好，當我們需要背景透明，但是文字正常顯示的時候，這個方法就不適用了，這也就是今天361源碼給大家著重介紹的第二種實現元素透明的方法。
二、filter濾鏡實現元素半透明
代碼如下：
.transparent_class { filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#3f000000',endColorstr='#3f000000'); background-color:rgba(0, 0, 255, 0.5); }代碼解析：
enabled:可選項。布爾值(Boolean)。設置或檢索濾鏡是否激活。
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:垂直漸變。
StartColorStr:可讀寫。字符串(String)。參閱 startColorStr 屬性。
StartColor:可讀寫。整數值(Integer)。設置或檢索色彩漸變的開始顏色。 取值范圍為 0 - 4294967295 。 0 為透明。 4294967295 為不透明白色。
EndColorStr:可讀寫。字符串(String)。設置或檢索色彩漸變的結束顏色和透明度。參閱 startColorStr 屬性。默認值為 #FF000000 。不透明黑色。
EndColor:可讀寫。整數值(Integer)。設置或檢索色彩漸變的結束顏色。 取值范圍為 0 - 4294967295 。 0 為透明。 4294967295 為不透明白色。當在腳本中使用此特性時，也可以用十六進制格式： 0xAARRGGBB 。
在對象的背景和內容之間顯示定制的色彩層。當此效果通過轉變顯示時，在漸變冊色彩層之上的文本程序性的初始化為透明的，當色彩漸變實現后，文本顏色會以其定義的值更新。 這樣就能實現div塊的背景透明而子元素不會透明，比使用opacity屬性要人性化得多。
下面我們通過具體的演示效果來看看兩種透明效果區別： DIV+CSS實現透明的兩種方法預覽
最后，我們就前面的《CSS實現頁面全灰色》再做個延伸：
一些網站FLASH動畫的顏色不能被CSS濾鏡控制，可以在FLASH代碼的和之間插入：
html {FILTER: gray}當然也有些朋友使用的一句話效果代碼如下：
html { filter:progid:DXImageTransform.Microsoft.BasicImage(grayscale=1); }在使用上面這一句話代碼的適合需要注意一點就是必須是使用最新的網頁標準協議，否則可能不生效哦。
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml">
好了，廢話講解了好多，希望能對大家有所幫助
新聞熱點
疑難解答
