溫馨提示×
您好，登錄后才能下訂單哦！
點擊 登錄注冊 即表示同意《億速云用戶服務條款》
您好，登錄后才能下訂單哦！
這篇文章主要為大家展示了“css不透明度opacity屬性的示例分析”，內容簡而易懂，條理清晰，希望能夠幫助大家解決疑惑，下面讓小編帶領大家一起研究并學習一下“css不透明度opacity屬性的示例分析”這篇文章吧。
一、opacity屬性
1、opacity
習慣上說“透明度”，其實應該叫“不透明度”。opacity意思：不透明，而背景色的默認值：transparent意思才是“透明的”。所以opacity用來設置不透明度，取值從[0.0~1.0]，代表從完全透明到完全不透明，0.0就和transparent一樣了，看不到但是實實在在存在。
默認值：1，完全不透明。
Inherited:默認繼承。所以給父元素設置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、子元素設置opacity
父元素設置opacity，子元素也設置opacity，在IE下子元素設置的opacity不起作用，在ff和Chrome下，子元素最終的opacity=父元素opacity*子元素opacity。
這樣就可以解釋為什么父元素設置了不透明度后，子元素設置不透明度為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>不設置opacity效果<p>
</div>
<divclass="opacity">
<p>父元素(div)設置opacity:0.5效果</p>
</div>
<divclass="opacity">
<pclass="sonOpacity">父元素(div)設置opacity:0.5，同時子元素（p）設置opacity:0.3效果</p>
</div>
</body>
</html>
以上是“css不透明度opacity屬性的示例分析”這篇文章的所有內容，感謝各位的閱讀！相信大家都有了一定的了解，希望分享的內容對大家有所幫助，如果還想學習更多知識，歡迎關注億速云行業資訊頻道！
免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
