溫馨提示×
您好，登錄后才能下訂單哦！
點擊 登錄注冊 即表示同意《億速云用戶服務(wù)條款》
您好，登錄后才能下訂單哦！
這篇文章主要為大家展示了“css不透明度opacity屬性的示例分析”，內(nèi)容簡而易懂，條理清晰，希望能夠幫助大家解決疑惑，下面讓小編帶領(lǐng)大家一起研究并學(xué)習(xí)一下“css不透明度opacity屬性的示例分析”這篇文章吧。
一、opacity屬性
1、opacity
習(xí)慣上說“透明度”，其實應(yīng)該叫“不透明度”。opacity意思：不透明，而背景色的默認(rèn)值：transparent意思才是“透明的”。所以opacity用來設(shè)置不透明度，取值從[0.0~1.0]，代表從完全透明到完全不透明，0.0就和transparent一樣了，看不到但是實實在在存在。
默認(rèn)值：1，完全不透明。
Inherited:默認(rèn)繼承。所以給父元素設(shè)置opacity時，所有子元素也會繼承opacity屬性。
<style>
div{
background-color:red;
}
.opacity{
opacity:0.5;
}
</style>
---------------------------
<div>
文本和背景色都受到不透明度級別的影響。
</div>
<br/>
<divclass="opacity">
文本和背景色都受到不透明度級別的影響。
</div>
效果圖：
1.png
所有瀏覽器都支持opacity屬性，IE8及更早的版本支持替代的filter屬性。
filter:alpha(opacity=number)，中number取值[0~100],0完全透明，100不透明。
所以為兼容可寫為：
.opacity{
opacity:0.5;
filter:alpha(opacity=50);
}
2、子元素設(shè)置opacity
父元素設(shè)置opacity，子元素也設(shè)置opacity，在IE下子元素設(shè)置的opacity不起作用，在ff和Chrome下，子元素最終的opacity=父元素opacity*子元素opacity。
這樣就可以解釋為什么父元素設(shè)置了不透明度后，子元素設(shè)置不透明度為1【即完全不透明】但不生效了。
例子：
<!DOCTYPEhtml>
<html>
<metacharset="utf-8">
<head>
<title>透明度bystarof</title>
<style>
div{
background-color:red;
}
.opacity{
opacity:0.5;
}
.sonOpacity{
opacity:0.3;
}
</style>
<body>
<div>
<p>不設(shè)置opacity效果<p>
</div>
<divclass="opacity">
<p>父元素(div)設(shè)置opacity:0.5效果</p>
</div>
<divclass="opacity">
<pclass="sonOpacity">父元素(div)設(shè)置opacity:0.5，同時子元素（p）設(shè)置opacity:0.3效果</p>
</div>
</body>
</html>
以上是“css不透明度opacity屬性的示例分析”這篇文章的所有內(nèi)容，感謝各位的閱讀！相信大家都有了一定的了解，希望分享的內(nèi)容對大家有所幫助，如果還想學(xué)習(xí)更多知識，歡迎關(guān)注億速云行業(yè)資訊頻道！
免責(zé)聲明：本站發(fā)布的內(nèi)容（圖片、視頻和文字）以原創(chuàng)、轉(zhuǎn)載和分享為主，文章觀點不代表本網(wǎng)站立場，如果涉及侵權(quán)請聯(lián)系站長郵箱：is@yisu.com進行舉報，并提供相關(guān)證據(jù)，一經(jīng)查實，將立刻刪除涉嫌侵權(quán)內(nèi)容。
億速云公眾號
手機網(wǎng)站二維碼
