opacity、rgb、rgba透明背景
阿新 • • 發佈:2019-01-30
opacity 屬性是css3的屬性,是指顏色的不透明度,也可以實現透明效果,1為完全不透明,0為完全透明
例子:opacity: .5;
rgb() 定義了顏色的紅綠藍值
例子:rgb(0,0,0); //表示黑色
rgba() 表示 紅 綠 藍 alpha ,W3C指在原有的rgb顏色模型之後增加了 “alpha”引數,可以讓指定的顏色透明化。
例子:rgba(0,0,0,.5) ;
opacity和rgba()都能實現透明效果,但最大的不同是opacity作用於元素,以及元素內的所有內容的透明度,而rgba()只作用於元素的顏色或其背景色。這就意味著前者會把指定元素及其區域全部透明化,包括文字、背景之類的,當他的opacity值為0,也就是完全透明時,會顯示一個空白塊。而後者影響的只是指定元素本身的透明度,更加的可控。
例子:
<!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>CSS3 RGBA</title> <style> html,body,h1,h2,p,pre{margin:0;padding:0;} body{padding:0 20px;background:#090;color:#000;font:14px/1.6 Arial;} h1{font-size:26px;} h2{padding:10px 0;font-size:16px;} pre{padding:2px 0;} div{padding:0 20px;border:1px solid #fff;color:#fff;} .grammar{padding:0 20px;border:0 none;font-weight:bold;font-size:16px;} #hex{ background-color:#000000; } #rgb{ background-color:rgb(0,0,0); } #rgb-alpha{ background-color:rgb(0,0,0); opacity:.5; } #rgba{ background-color:rgba(0,0,0,.5); } .tips{padding:10px;color:#c00;} .notes{padding:2px 10px;background:#eee;} .navigation{padding:10px 0;} .copyright{padding:10px 0;font-style:italic;font-weight:bold;font-size:14px;} </style> </head> <body> <h1>CSS3 RGBA:</h1> <p class="notes">瀏覽器參照基準:Firefox3.6 and Later, Chrome5 and Later, Safari5 and Later, Opera10.53 and Later, IE系列不做參考</p> <h2>語法:</h2> <div class="grammar"> rgba(0-255,0-255,0-255,0-1) </div> <h2>HEX顏色中的黑色:</h2> <div id="hex"> <pre><code>background-color:#000000;</code></pre> </div> <h2>RGB顏色中的黑色:</h2> <div id="rgb"> <pre><code>background-color:rgb(0,0,0);</code></pre> </div> <h2>RGB顏色+opacity透明度:</h2> <div id="rgb-alpha"> <pre><code>background-color:rgb(0,0,0); opacity:.5;</code></pre> </div> <h2>RGBA顏色:</h2> <div id="rgba"> <pre><code>background-color:rgba(0,0,0,.5);</code></pre> </div> </body> </html>