代碼是

filter: Alpha(Opacity=50)

background-color: rgba(0, 0, 0, 0.5);

這種設置層里面所有的東西都透明了。

其實說到半透明，相信絕大部分同仁應該都知道的一種很常用的方法，即css3的opacity結合ie

alpha濾鏡即可。比如：

.translucent{

background:#000;

opacity:

0.5;

filter:

progid:DXImageTransform.Microsoft.alpha(opacity=50);

}

上面這個樣式類即為一個背景色為黑色，元素半透明的樣式類。這也是目前半透明遮罩層最常用的方法，(ps:有個小地方需要注意，在ie6下需要觸發它的haslayout或包裹性才有效，不過一般不存在問題，因為一般這種半透明遮罩的元素都是絕對定位的，overflow:hidden;或position:absolute;或float或display:inline-block都可以觸發元素包裹性..這個問題扯遠了，以后會單獨再出一篇關于包裹性的文)

恩，正如各位看官所見，打開的層的確半透明了，不過半透明的好徹底，以至于層里面所有子元素都半透明了...但是我的層里面的圖片和那個紅色的塊本來是不打算透明的，我只要背景色透明就好了..所以這個方法并沒有滿足這個需求。

于是，針對只要背景色透明的東東，應該有另一種辦法，就是css3的rgba屬性結合ie的gradient濾鏡

.bg-translucent{

background:rgba(0,0,0,0.5);

filter:progid:DXImageTransform.Microsoft.gradient(startcolorstr=#7F000000,endcolorstr=#7F000000);

}

這個稍微復雜一點

在CSS中有一個Alpha濾鏡，這個濾鏡可以設置目標元素的透明度。還可以通過指定坐標，從而實現各種不同范圍的透明度。具體語法如下：

{filter:

alpha(opacity=#opacity,finishopacity=#finishopacity,style=#style,startx=#startx,starty=#starty,finishx=#finishx,finishy=#finishy)}

具體參數含義如下：

opacity?透明度。默認的范圍是從0?到?100，他們其實是百分比的形式。也就是說，0代表完全透明，100代表完全不透明。?finishopacity?是一個可選參數，如果想要設置漸變的透明效果，就可以使用他們來指定結束時的透明度。范圍也是0?到?100。?style?指定透明區域的形狀特征：0?代表統一形狀，1?代表線形，2?代表放射狀，3?代表矩形?startx?漸變透明效果開始處的?X坐標。?starty?漸變透明效果開始處的?Y坐標。?finishx?漸變透明效果結束處的?X坐標。?finishy?漸變透明效果結束處的?Y坐標。

以上的參數可以選用，可以只設置一個opacity

例如：

{filter:alpha(opacity=50)}

這個就是半透明的設置，只要把{}中的代碼加入到需要設置的模版中的{}的即可，記得與前面的代碼之間要用";"間隔，不然設置是無效的

例如：

我要設置模版區域背景的顏色(白色)+半透明[就是我現在blog的效果]

只要在

.modbox{}

.modbl{}

.modbc{}

.modbr{}

中都設置background-color:white

這些就是模版背景設置的ID

然后再在.modbox,.modbl,.modbc,.modbr{}如果沒有這個的話可以自己加一個

中加入filter : alpha(opacity=80)就可以達到所有模版的背景都是半透明的效果了

如果希望像我這樣只顯示blog的背景，別的都全透明的話，那么就在別的模版中加入背景全透明的代碼即可

background:transparent?這就是背景全透明的代碼

不過這樣的話，相關模版的主要區域是透明了，可是底下還會有一條顏色留著的，所以另外還要在

.modbl{}

.modbc{}

.modbr{}

中也加入背景全透明的代碼，這樣才能讓模版區域完全透明，就像我現在的效果一樣

另外這個參數目前只能用于背景色的設置，背景圖片無法設置為半透明

總結

以上是生活随笔為你收集整理的css背景颜色设置为半透明,关于css设置背景色透明，半透明的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。