不透明度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【即完全不透明】但不生效了。
例子：
<!DOCTYPE html> <html><meta charset="utf-8"> <head><title>透明度by starof</title><style> div{background-color: red; } .opacity{opacity: 0.5; } .sonOpacity{opacity: 0.3; } </style> <body> <div> <p>不設置opacity效果<p> </div> <div class="opacity"><p>父元素(div)設置opacity:0.5效果</p> </div> <div class="opacity"><p class="sonOpacity">父元素(div)設置opacity:0.5，同時子元素（p）設置opacity:0.3效果</p> </div> </body> </html> View Code?
3、效果展示
1、半透明背景效果
可以做出下面效果：
<!DOCTYPE html> <html> <head><title>b.html</title><meta charset="UTF-8"><style> .background{width: 400px;height: 250px;margin:15px;background:url(img/wl.jpg) no-repeat;border: 1px solid red; } .opacity{width: 350px;height: 204px;margin:20px;padding:0;background-color: #ffffff;border: 1px solid black;/* for IE */filter:alpha(opacity=60);/* CSS3 standard */opacity:0.6; } P{margin: 30px 40px;line-height:1.5; } </style> </head> <body><div class="background"><div class="opacity"><p>一段文字一段文字一段文字一段文字一段文字一段文字一段文字一段文字一段文字一段文字一段文字一段文字一段文字一段文字一段文字一段文字一段文字一段文字一段文字一段文字</p></div></div></body> </html> View Code2、父元素和子元素同時設置opacity，在ff和chrome下子元素opacity為父元素opacity*子元素opacity【update20161124】
去掉背景色，只看文字效果更明顯。
<!DOCTYPE html> <html><meta charset="utf-8"> <head><title>透明度by starof</title><style> .opacity{opacity: 0.5; } .sonOpacity{opacity: 0.5; } .sonOpacity2{opacity: 0.25; } </style> <body> <div> <p>不設置opacity效果<p> </div> <div class="opacity"><p>父元素(div)設置opacity:0.5效果</p> </div> <div class="opacity"><p class="sonOpacity">父元素(div)設置opacity:0.5，同時子元素（p）設置opacity:0.5效果</p> </div><div><p class="sonOpacity2">父元素(div)不設置opacity，子元素（p）設置opacity:0.25效果，和上面的文字透明度一樣</p> </div> </body> </html> View Code二、opacity和rgba模式對比
語法：rgba(r,g,b,a)，【R:red,G:green,B:blue,A:alpha】
前三個參數為rgb數值，取值[0~255]，最后一個參數代表透明度，取值[0~1]。
background-color: rgba(255,0,0,0.5);
看一個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进阶的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： Android:EditText 属性
- 下一篇： java jdk缓存-128~127的L