代碼是

filter: Alpha(Opacity=50)

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

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

其實(shí)說到半透明，相信絕大部分同仁應(yīng)該都知道的一種很常用的方法，即css3的opacity結(jié)合ie

alpha濾鏡即可。比如：

.translucent{

background:#000;

opacity:

0.5;

filter:

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

}

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

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

于是，針對(duì)只要背景色透明的東東，應(yīng)該有另一種辦法，就是css3的rgba屬性結(jié)合ie的gradient濾鏡

.bg-translucent{

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

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

}

這個(gè)稍微復(fù)雜一點(diǎn)

在CSS中有一個(gè)Alpha濾鏡，這個(gè)濾鏡可以設(shè)置目標(biāo)元素的透明度。還可以通過指定坐標(biāo)，從而實(shí)現(xiàn)各種不同范圍的透明度。具體語法如下：

{filter:

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

具體參數(shù)含義如下：

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

以上的參數(shù)可以選用，可以只設(shè)置一個(gè)opacity

例如：

{filter:alpha(opacity=50)}

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

例如：

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

只要在

.modbox{}

.modbl{}

.modbc{}

.modbr{}

中都設(shè)置background-color:white

這些就是模版背景設(shè)置的ID

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

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

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

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

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

.modbl{}

.modbc{}

.modbr{}

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

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

總結(jié)

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

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。