CSS設定半透明背景執行個體詳解

最後更新：2017-01-13 來源：互聯網

上載者：User

創建阿里雲帳戶，並獲得超過 40 款產品的免費試用版；而企業帳戶則可以享有總值 $1200 的免費試用版。立即註冊！

無圖片半透明背景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，黑色

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

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

我把我的背景半透明代碼貼出來吧

代碼如下

複製代碼

附：#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 程式碼：

代碼如下	複製代碼
<body> <div class="non-transparent"> aaaaa </div> </body> <div class="transparent"> <div class="box"> box </div> </div>

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;

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

本文章原先以中文撰寫並發佈於 aliyun.com，亦設英文版本，僅作資訊用途。本網站不對文章的準確性，完整性或可靠性或其任何翻譯作出任何明示或暗示的陳述或保證。如對該文章有任何疑慮或投訴，請傳送電郵至 info-contact@alibabacloud.com 並提供相關疑慮或投訴的詳細說明。職員會於 5 個工作天內與您聯絡，一經驗證之後，即會刪除該侵權內容。

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

Get Started for Free

Sales Support

1 on 1 presale consultation

Chat Contact Sales
After-Sales Support

24/7 Technical Support 6 Free Tickets per Quarter Faster Response

Open a Ticket
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.

Learn More