Background背景色透明RGBA和opacity的對比實例（轉載）

Background背景色透明RGBA
時間:2013-03-16 00:44│來自: 信有UED│做者:JUN│點擊:9704次
RGB不用說，你們都知道是什麼，但RGBA是什麼呢？ 1 2 background : rgb ( 0 , 0 , 0 ) ; background : rgba ( 0 , 0 , 0 , 0.5 ) ; 咱們會發現RGBA裏面新添加了一個值，但這個值又是什麼呢？

RGB不用說，你們都知道是什麼，但RGBA是什麼呢？
background: rgb(0,0,0);
background: rgba(0, 0, 0,0.5);
咱們會發現RGBA裏面新添加了一個值，但這個值又是什麼呢？最後這個值就是在RGB的基礎上加進了一個通道Alpha。
瀏覽器的兼容性：

若是龐統說rgba是製做透明色（透明背景色、透明邊框色、透明前景色等），你們不禁會想起opacity 這個東西。如今咱們先來看一個rgba和opacity的對比實例：
HTML代碼：
<div class="test">

<p>Opacity效果</p> 
<ul> 
    <li class="opacity opacity1">100%</li> 
    <li class="opacity opacity2">80%</li>     
    <li class="opacity opacity3">60%</li>     
    <li class="opacity opacity4">40%</li>     
    <li class="opacity opacity5">20%</li>     
    <li class="opacity opacity6">0</li>    
</ul>    
<p>CSS3的RGBA效果</p>    
<ul>     
    <li class="rgba rgba1">1</li>     
    <li class="rgba rgba2">0.8</li>     
    <li class="rgba rgba3">0.6</li>     
    <li class="rgba rgba4">0.4</li>     
    <li class="rgba rgba5">0.2</li>     
    <li class="rgba rgba6">0</li>  
</ul>

</div>
CSS代碼：
li.opacity { float:left; width:50px; height:50px;}
li.opacity1{ background:rgb(255,255,0); opacity:1; filter:alpha(opaity=100);}
li.opacity2{ background:rgb(255,255,0); opacity:0.8; filter:alpha(opaity=80);}
li.opacity3{ background:rgb(255,255,0); opacity:0.6; filter:alpha(opaity=60);}
li.opacity4{ background:rgb(255,255,0); opacity:0.4; filter:alpha(opaity=40);}
li.opacity5{ background:rgb(255,255,0); opacity:0.2; filter:alpha(opaity=20);}
li.opacity6{ background:rgb(255,255,0); opacity:0; filter:alpha(opaity=0);}

li.rgba { float:left; width:50px; height:50px; }
li.rgba1{ background:rgba(255,255,0,1);}
li.rgba2{ background:rgba(255,255,0,0.8);}
li.rgba3{ background:rgba(255,255,0,0.6);}
li.rgba4{ background:rgba(255,255,0,0.4);}
li.rgba5{ background:rgba(255,255,0,0.2);}
li.rgba6{ background:rgba(255,255,0,0);}
效果：

效果中咱們能夠看出，他們相同之處就是背景色徹底是同樣的，但區別就是一直讓你們以爲頭痛的問題，那就是opacity後代元素會隨着一塊兒具備透明性，因此咱們Opacity中的字隨着透明值降低愈來愈看不清楚，而RGBA不具備這樣的問題，可是其支持的瀏覽器中有一個佔在大市場份額的IE不支持，這也就是讓咱們須要去作兼容。
綜合上面的所述，規納出一個RGBA在實際應用中的模式
.rgba {

background: rgb(0,0,0); /*The Fallback color,這裏也可使用一張圖片來代替*/  
background: rgba(0, 0, 0,0.5);  
-ms-filter: "progid:DXImageTransform.Microsoft.gradient(GradientType=1,startColorstr=#80000000,endColorstr=#80000000)"; /*Filter for IE8 */   
filter: progid:DXImageTransform.Microsoft.gradient(GradientType=1,startColorstr=#80000000, endColorstr=#80000000); /*Filter for older IEs */

}
或者
.bg{

background:rgba(0, 0, 0, 0.65)!important; 
filter:alpha(opacity=70);  
background:#000;

}
這裏須要注意的是startColorStr和endColorStr的值#80000000,其中前兩位是十六進制的透明度80,也就是透明值爲0.5然後面六位是十六進制的顏色#000000(black黑色)。
rgba不單能夠應用在background上，咱們還能夠應用在只要設置了顏色的地方均可以使用，我在這裏簡單的說一下幾種：
第一種：前景色color
HTML代碼
<p class="norgba-color">用rgba改變個人字體顏色</p>
<p class="rgba-color">用rgba改變個人字體顏色</p>
CSS代碼
.norgba-color{ color:rgb(255, 0, 0);}
.rgba-color { color:rgba(255, 0, 0,0.5);}
效果：

第二種：邊框色border-color
HTML代碼
<p class="norgba-border-color">用rgba改變個人邊框顏色</p>
<p class="rgba-border-color">用rgba改變個人邊框顏色</p>
CSS代碼
.norgba-border-color{ border:5px solid rgb(255,0,0); width: 200px; }
.rgba-border-color { border:5px solid rgba(255,0,0,0.5); width: 200px; }
效果：

第三種：字體的陰影色text-shadow
HTML代碼
<p class="norgba-text-shadow">用rgba改變個人字體陰影顏色</p>
<p class="rgba-text-shadow">用rgba改變個人字體陰影顏色</p>
CSS代碼
.norgba-text-shadow { text-shadow:0 2px 1px rgb(255,0,0);}
.rgba-text-shadow { text-shadow:0 2px 1px rgba(255,0,0,0.3);}
效果：

第四種：改變邊框陰影色
HTML代碼
p class="norgba-box-shadow">用rgba改變個人邊框陰影顏色</p>
<p class="rgba-box-shadow">用rgba改變個人邊框陰影顏色</p>
CSS代碼
.norgba-box-shadow{

border:5px solid green;  
width:200px;  
-webkit-box-shadow:0 2px 2px rgb(255,0,0);  
-moz-box-shadow:0 2px 2px rgb(255,0,0);  
box-shadow:0 2px 2px rgb(255,0,0);

}
.rgba-box-shadow {

border:5px solid green;  
width:200px;  
-webkit-box-shadow:0 2px 2px rgba(255,0,0,0.6);  
-moz-box-shadow:0 2px 2px rgba(255,0,0,0.6);  
box-shadow:0 2px 2px rgba(255,0,0,0.6);

}
效果：

經過上面瀏覽器兼容列表會發現不是全部的瀏覽器都支持RGBA，因此咱們在用的時候也要考慮到這個狀況。
當前文章地址：http://www.shejicool.com/web/html_css/417.html