CSS設(shè)置半透明背景的方法有很多種，我這里根據(jù)自己的經(jīng)驗來與大學(xué)分享學(xué)習(xí)常用的CSS設(shè)置半透明背景設(shè)置方法總結(jié)。

無圖片半透明背景css

如果，單純地用背景色并結(jié)合opacity進(jìn)行設(shè)置透明度，那么會出現(xiàn)子元素中的文字也同樣出現(xiàn)透明的情況。

第二種情況：用png透明度合適的背景圖，但這樣的話，還得針對IE6進(jìn)行PNG圖片的灰色背景處理。

第三種方法：用rgba結(jié)合專用hack兼容常規(guī)瀏覽器。

Rgba進(jìn)行背景色填充，并設(shè)置透明度，并不會導(dǎo)致子元素也繼承其的透明度。例如：background:rgba(0,0,0,0.5);這句，就適合了支持CSS3.0的瀏覽器。但I(xiàn)E6、IE7、IE8，我們可以利用到IE濾鏡的漸變進(jìn)行設(shè)置，開始和結(jié)束的顏色都一樣就行了,代碼如下: 代碼如下 復(fù)制代碼

filter:progid:DXImageTransform.Microsoft.gradient(GradientType = 0,startColorstr = '#9A000000', endColorstr = '#9A000000' )9

(9A是透明度的16進(jìn)制，例如上面，眾所周知，透明度在IE中的值是1%~100%,之間，而在顏色中，透明度為100%的時候就是RGB的滿值255，這時候，如果想設(shè)置0.6的透明度，就需要用255*0.6=153，這時候，這個154是十進(jìn)制，我們還需要轉(zhuǎn)換為16進(jìn)制才能用，經(jīng)過百度的轉(zhuǎn)換器得出是9A，所以在開始和結(jié)束的顏色前面加上：9A)

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

pacity 透明度。默認(rèn)的范圍是從0 到 100，他們其實是百分比的形式。也就是說，0代表完全透明，100代表完全不透明。

finishopacity 是一個可選參數(shù)，如果想要設(shè)置漸變的透明效果，就可以使用他們來指定結(jié)束時的透明度。范圍也是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è)置一個opacity

例如：

{filter:alpha(opacity=50)}

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

例如：

我要設(shè)置模版區(qū)域背景的顏色(白色) 半透明

只要在

.modbox{}

.modbl{}

.modbc{}

.modbr{}

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

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

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

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

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

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

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

.modbl{}

.modbc{}

.modbr{}

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

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

我把我的背景半透明代碼貼出來吧 代碼如下 復(fù)制代碼

.modbox{padding:10px 10px 0 10px;background-color:#FFFFFF;border-left:1px solid #813533;border-right:1px solid #813533}

.modbl{background:transparent;border-left:1px solid #813533;border-bottom:1px solid #813533;line-height:1px}

.modbc{background:transparent;border-bottom:1px solid #813533;line-height:1px}

.modbr{background:transparent;;border-right:1px solid #813533;border-bottom:1px solid #813533;line-height:1px}

.modbox,.modbl,.modbc,.modbr{filter:alpha(opacity=80);-moz-opacity:0.8;width:auto !important;width:100%}

紅色字是關(guān)鍵設(shè)置，如果不想設(shè)置全透明的話，可以把.modbl{}.modbc{}.modbr{}三個中的background:transparent改成.modbox{}中的background-color:#FFFFFF，當(dāng)然這里的#FFFFFF你可以換成自己喜歡的顏色，不過為了美觀統(tǒng)一，建議這4個的顏色代碼最好設(shè)置為一樣的

附：#FFFFFF就是white，白色；#000000就是black，黑色

哎，累死了，打了這么多，希望大家能學(xué)習(xí)到啊……………………

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

.modbl{}

.modbc{}

.modbr{}

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

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

我把我的背景半透明代碼貼出來吧 代碼如下 復(fù)制代碼

.modbox{padding:10px 10px 0 10px;background-color:#FFFFFF;border-left:1px solid #813533;border-right:1px solid #813533}

.modbl{background:transparent;border-left:1px solid #813533;border-bottom:1px solid #813533;line-height:1px}

.modbc{background:transparent;border-bottom:1px solid #813533;line-height:1px}

.modbr{background:transparent;;border-right:1px solid #813533;border-bottom:1px solid #813533;line-height:1px}

.modbox,.modbl,.modbc,.modbr{filter:alpha(opacity=80);-moz-opacity:0.8;width:auto !important;width:100%}

紅色字是關(guān)鍵設(shè)置，如果不想設(shè)置全透明的話，可以把.modbl{}.modbc{}.modbr{}三個中的background:transparent改成.modbox{}中的background-color:#FFFFFF，當(dāng)然這里的#FFFFFF你可以換成自己喜歡的顏色，不過為了美觀統(tǒng)一，建議這4個的顏色代碼最好設(shè)置為一樣的

附：#FFFFFF就是white，白色；#000000就是black，黑色

其他的還存在差異的IE瀏覽器，還得加這么一句：background:rgba(0,0,0,0.6) 9;看到別的網(wǎng)站上這么寫，上面的還有待測試.這些天忙，先大概記錄著

看一些實例

要設(shè)置某一元素的背景為透明，在 chrome 、firefox、opera 下是這樣的： 代碼如下 復(fù)制代碼

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

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

rgba 中的最后一個參數(shù) 0.4 就是想要的透明度，范圍在0～1之間。

在 ie 中一般是這樣的： 代碼如下 復(fù)制代碼

background-color: rgb(0, 0, 0);

filter: alpha(opacity=40);opacity

表示透明度，它的值范圍在 0～100 之間

那么如何兼容各瀏覽器呢？只要把它們寫在一起就行了。

由于 ie 不支持 rgba，所以會忽略之。其他瀏覽器對于自己不支持的，一般也會忽略。

下面來個示例：

HTML 代碼：

代碼如下 復(fù)制代碼

aaaaa

box

CSS 代碼： 代碼如下 復(fù)制代碼

.non-transparent:hover {

background-color: yellow;

}

.transparent {

position: absolute;

top: 0;

left: 0;

text-align: center;

width: 100%;

height: 100%;

filter: alpha(opacity=40);

background-color: rgb(0, 0, 0);

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

}

.box {

background-color: yellow;

width: 50%;

height: 50%;

position: relative;

left: 5%;

top: 10%;

}

顯示效果：

chrome:

firefox:

opera:

ie8:

另外，在 chrome、firefox、opera 中也可以這樣:

opacity: 0.4;

但是這樣的話，會把所有子元素的透明度也設(shè)置為同樣的值，效果如下圖：

總結(jié)

以上是生活随笔為你收集整理的HTML设置半透明的背景,CSS设置半透明背景实例详解的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

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