不透明度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/>
<div class="opacity">
文本和背景色都受到不透明度級別的影響。
</div>
所有瀏覽器都支持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【即完全不透明】但不生效了。
例子：
View Code
3、效果展示
1、半透明背景效果
可以做出下面效果：
View Code
2、父元素和子元素同時設置opacity，在ff和chrome下子元素opacity為父元素opacity*子元素opacity【update20161124】
去掉背景色，只看文字效果更明顯。
View Code
二、opacity和rgba模式對比
語法：rgba(r,g,b,a)，【R:red,G:green,B:blue,A:alpha】
前三個參數為rgb數值，取值[0~255]，最後一個參數代表透明度，取值[0~1]。
看一個opacity和rgba對比的例子：
<style type="text/css">
div{
display: inline-block;
width: 200px;
height: 100px;
text-align: center;
font-size: 20px;
}
.opacity{
background-color: rgb(255,0,0);
opacity: 0.5;
}
.rgba{
background-color: rgba(255,0,0,0.5);
}
</style>
----------------------------------------------
<body >
<div class="opacity">
<p>opacity效果</p>
</div>
<div class="rgba">
<p>transparent效果</p>
</div>
</body>
三、瀏覽器支持
可通過這裏查看
http://caniuse.com/#search=opacity
本文作者starof,因知識本身在變化，作者也在不斷學習成長，文章內容也不定時更新，為避免誤導讀者，方便追根溯源，請諸位轉載註明出處：http://www.cnblogs.com/starof/p/5443445.html有問題歡迎與我討論，共同進步。
不透明度opacity進階