詳解CSS3的opacity屬性設(shè)置透明效果的用法

Kayo 發(fā)布時(shí)間：2016-05-09 11:16:20 作者：wibibi

這篇文章主要介紹了詳解CSS3的opacity屬性設(shè)置透明效果的用法,同時(shí)還講到了opacity透明度帶有的繼承性影響子集元素的問題,值得初學(xué)者注意,需要的朋友可以參考下

CSS3 opacity 屬性的功能是用來控制網(wǎng)頁(yè)元素的透明效果（調(diào)整不透明度），早期網(wǎng)頁(yè)設(shè)計(jì)常常會(huì)用到許多的透明效果，通常都是透過 png 圖層來制作透明的感覺，現(xiàn)在網(wǎng)頁(yè)設(shè)計(jì)師可以使用 CSS3 opacity 屬性來輕松的達(dá)到網(wǎng)頁(yè)元素不透明度的調(diào)整，CSS3 opacity 屬性的語法非常簡(jiǎn)單，只需要透過數(shù)字的調(diào)整，就能呈現(xiàn)出不同的不透明度，進(jìn)而設(shè)計(jì)出相當(dāng)具有現(xiàn)代感的網(wǎng)頁(yè)風(fēng)格，可應(yīng)用在網(wǎng)頁(yè)圖片、DIV 區(qū)塊、span 區(qū)域、Table 表格 ... 等元素，所有新版的主流瀏覽器都支援 CSS3 opacity 屬性的效果。

CSS3 opacity 屬性基本語法
opacity: 不透明度;
CSS3 opacity 屬性參數(shù)的＂不透明度＂是以數(shù)字表示，從 0.0 至 1.0 都可以，完全透明是 0.0，完全不透明是 1.0，換句話說，數(shù)字越大代表元素越不透明。參數(shù)除了可以使用＂不透明度＂之外，還有 inherit 繼承父層屬性，不過瀏覽器支援度較差，不建議使用。

CSS3 opacity 屬性實(shí)際范例

CSS Code復(fù)制內(nèi)容到剪貼板

<div style="padding:10px;background-color:green;opacity:0.1;">
測(cè)試 CSS3 opacity 屬性的不透明度處理
</div>
<div style="padding:10px;background-color:green;opacity:0.5;">
測(cè)試 CSS3 opacity 屬性的不透明度處理
</div>
<div style="padding:10px;background-color:green;opacity:0.8;">
測(cè)試 CSS3 opacity 屬性的不透明度處理
</div>

范例的輸出效果
201659111910233.png (1043×136)

范例共準(zhǔn)備了三個(gè)加入 opacity 效果的 DIV 區(qū)塊，各位可以注意到從最上面開始的第一個(gè)區(qū)塊，不透明度為 0.1（opacity:0.1）所以整個(gè)區(qū)塊變成幾乎快看不到顏色與文字，第二個(gè)區(qū)塊不透明度設(shè)為 0.5（opacity:0.5），所以比第一個(gè)區(qū)塊清楚多了，第三個(gè)區(qū)塊再度降低不透明度到 0.8，文字與背景顏色都越更加明顯，這就是 CSS3 opacity 屬性的實(shí)際效果，由范例可以很清楚的看到，一個(gè) DIV 區(qū)塊內(nèi)的文字內(nèi)容與背景顏色（background-color）都會(huì)受到 opacity 屬性的不透明度影響。

補(bǔ)充：目前新版的主流瀏覽器均有支援 CSS3 opacity 屬性，但需要注意的是 IE8 以即更早版本的 IE 瀏覽器必須使用替代語法來實(shí)做，所謂的替代語法是利用 filter 屬性，寫法如「filter:Alpha(opacity=50);」，效果等于「opacity:0.5」。

opacity透明度屬性的繼承問題
CSS3的opacity透明度屬性具有繼承性，當(dāng)對(duì)某個(gè)對(duì)象設(shè)置了opacity透明度屬性的時(shí)候，其子集元素也會(huì)有透明度效果；

XML/HTML Code復(fù)制內(nèi)容到剪貼板

<div class="main">
<div class="div1">
<p>背景色為rgb的opacity效果</p>
</div>
<div class="div2">
<p>背景色為rgba的透明效果</p>
</div>
</div>

CSS：

CSS Code復(fù)制內(nèi)容到剪貼板

.main{
clear:rightright;
margin:20% auto;
overflow:hidden;
width:335px;
}
.main div{
color:red;
float:left;
display:inline-block;
width:160px;
height:160px;
text-align:center;
}
/*使用opacity透明屬性的顯示效果*/
.div1{background-color:rgb(0,0,0);
opacity:0.5;
filter:alpha(opacity=50);
-ms-filter:'progid:DXImageTransform.Microsoft.Alpha(opacity=50)';margin-right:15px;
}
.div1 p{
position:relative;
}
/*使用rgba色顯示的效果*/
.div2{
background:rgba(0,0,0,.5)
}

總結(jié)：使用rgba的背景色可以很直接的設(shè)置對(duì)象的透明度效果，而且對(duì)其子集元素沒有繼承性；而使用rgb色并設(shè)置opacity透明度屬性的對(duì)象卻產(chǎn)生了透明度繼承。

不過，可能你把整個(gè)代碼都copy下來并在IE9以下的瀏覽器都測(cè)試的話，你會(huì)發(fā)現(xiàn)在IE7、IE8瀏覽器中出現(xiàn)了設(shè)置opacity透明度屬性的對(duì)象中子集元素并沒有繼承父集元素的透明度效果，并且設(shè)置了背景色為rgba的對(duì)象反而沒有任何效果。這是因?yàn)椋?在設(shè)置了opacity透明度屬性的對(duì)象中的子集元素設(shè)置了position:relative屬性，這才使得它在IE9以下的瀏覽器中得到了解決；其次在IE9以下的瀏覽器并不兼容rgba色，所以，你會(huì)看到第二種的背景色沒有效果。