CSS設置半透明背景的方法有很多種，我這里根據自己的經驗來與大學分享學習常用的CSS設置半透明背景設置方法總結。

無圖片半透明背景css

如果，單純地用背景色并結合opacity進行設置透明度，那么會出現子元素中的文字也同樣出現透明的情況。

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

第三種方法：用rgba結合專用hack兼容常規瀏覽器。

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

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

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

具體參數含義如下：

pacity 透明度。默認的范圍是從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)}

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

例如：

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

只要在

.modbox{}

.modbl{}

.modbc{}

.modbr{}

中都設置background-color:white

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

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

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

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

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

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

.modbl{}

.modbc{}

.modbr{}

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

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

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

.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%}

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

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

哎，累死了，打了這么多，希望大家能學習到啊……………………

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

.modbl{}

.modbc{}

.modbr{}

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

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

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

.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%}

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

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

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

看一些實例

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

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

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

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

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

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

filter: alpha(opacity=40);opacity

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

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

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

下面來個示例：

HTML 代碼：

代碼如下 復制代碼

aaaaa

box

CSS 代碼： 代碼如下 復制代碼

.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;

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

總結

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

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