不透明度opacity进阶
一、opacity屬性
1、opacity
習(xí)慣上說(shuō)“透明度”，其實(shí)應(yīng)該叫“不透明度”。opacity 意思：不透明，而背景色的默認(rèn)值：transparent意思才是“透明的”。所以opacity用來(lái)設(shè)置不透明度，取值從[0.0~1.0]，代表從完全透明到完全不透明，0.0就和transparent一樣了，看不到但是實(shí)實(shí)在在存在。
默認(rèn)值：1，完全不透明。
Inherited:默認(rèn)繼承。所以給父元素設(shè)置opacity時(shí)，所有子元素也會(huì)繼承opacity屬性。
<style> div{background-color: red; } .opacity{opacity: 0.5; } </style> --------------------------- <div> 文本和背景色都受到不透明度級(jí)別的影響。 </div> <br/> <div class="opacity"> 文本和背景色都受到不透明度級(jí)別的影響。 </div>所有瀏覽器都支持opacity屬性，IE8及更早的版本支持替代的filter屬性。
filter:alpha(opacity=number)，中number取值[0~100],0完全透明，100不透明。
所以為兼容可寫(xiě)為：
.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【即完全不透明】但不生效了。
例子：
<!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>不設(shè)置opacity效果<p> </div> <div class="opacity"><p>父元素(div)設(shè)置opacity:0.5效果</p> </div> <div class="opacity"><p class="sonOpacity">父元素(div)設(shè)置opacity:0.5，同時(shí)子元素（p）設(shè)置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、父元素和子元素同時(shí)設(shè)置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>不設(shè)置opacity效果<p> </div> <div class="opacity"><p>父元素(div)設(shè)置opacity:0.5效果</p> </div> <div class="opacity"><p class="sonOpacity">父元素(div)設(shè)置opacity:0.5，同時(shí)子元素（p）設(shè)置opacity:0.5效果</p> </div><div><p class="sonOpacity2">父元素(div)不設(shè)置opacity，子元素（p）設(shè)置opacity:0.25效果，和上面的文字透明度一樣</p> </div> </body> </html> View Code二、opacity和rgba模式對(duì)比
語(yǔ)法：rgba(r,g,b,a)，【R:red,G:green,B:blue,A:alpha】
前三個(gè)參數(shù)為rgb數(shù)值，取值[0~255]，最后一個(gè)參數(shù)代表透明度，取值[0~1]。
background-color: rgba(255,0,0,0.5);
看一個(gè)opacity和rgba對(duì)比的例子：
<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>三、瀏覽器支持
可通過(guò)這里查看
http://caniuse.com/#search=opacity
?
?
本文作者starof,因知識(shí)本身在變化，作者也在不斷學(xué)習(xí)成長(zhǎng)，文章內(nèi)容也不定時(shí)更新，為避免誤導(dǎo)讀者，方便追根溯源，請(qǐng)諸位轉(zhuǎn)載注明出處：http://www.cnblogs.com/starof/p/5443445.html有問(wèn)題歡迎與我討論，共同進(jìn)步。
總結(jié)
以上是生活随笔為你收集整理的不透明度opacity进阶的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問(wèn)題。
- 上一篇： Android:EditText 属性
- 下一篇： java jdk缓存-128~127的L