css使背景透明內容不透明的方法

以前是這樣實現背景透明內容不透明的：將背景與內容分別放在兩個DIV中，然後使背景DIV透明，最終達到背景透明內容不透明的效果（挺麻煩的），背景透明使用的樣式是{opacity:0.5;filter:alpha(opacity=50);}。

最近才發現，原來還有更好的方法。

支持CSS3的瀏覽器我們可以使用background-color:rgba(0,0,0,0.5)來實現透明，rgba中的a則代表透明度，取值範圍在0-1之間。

對於不支持CSS3的IE瀏覽器我們可以使用濾鏡來達到使背景透明的目的，我們可以使用IE專有的濾鏡，如下：

filter:progid:DXImageTransform.Microsoft.Gradient(startColorstr=#77000000, endColorstr=#77000000);

只需要保持startColorStr與endColorStr值相同即可。其中startColorStr與endColorStr的值的格式爲#AARRGGBB， AA 、 RR 、 GG 、 BB 爲十六進制正整數。取值範圍爲 00 - FF 。 RR 指定紅色值， GG 指定綠色值， BB 指定藍色值，參閱 #RRGGBB 顏色單位。 AA 指定透明度， 00 是完全透明， FF 是完全不透明。超出取值範圍的值將被恢復爲默認值。 取值範圍爲 #FF000000 - #FFFFFFFF 。默認值爲 #FF0000FF （不透明藍色）。

因此，如果需要實現DIV背景透明內容不透明則可以這樣做：

.opacity{rgba(0,0,0,0.5);  filter:progid:DXImageTransform.Microsoft.Gradient(startColorstr=#77000000, endColorstr=#77000000);}

上面的做法是讓所有的IE瀏覽器都使用濾鏡，而IE9，IE10是支持CSS3的rgba屬性的，所以我們可以做一些處理：

在head中再添加（針對IE9以下的瀏覽器）：

<!--[if lt IE 9]>
<style>
.opacity{filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=#77000000, endColorstr=#77000000);}
</style>
<![endif]-->

來源於《小蝦虎魚http://www.xiaoboy.com》