對於設置透明度,我們有兩個可以選的css3屬性:rgba 和 opacity
opacity
用法:
#box{
background-color:rgb(125,25,0);
opacity: 0.5
}
IE9, Firefox, Chrome, Opera 和 Safari 使用屬性 opacity 來設定透明度。
opacity 屬性能夠設置的值從 0.0 到 1.0。值越小,越透明。
IE8 以及更早的版本使用濾鏡 filter:alpha(opacity=x)。x 能夠取的值從 0 到 100。值越小,越透明。
所以如果項目爲了要兼容IE8及以下,則需要寫兩段代碼
#box{
background-color:rgb(125,25,0);
opacity: 0.5;
filter:alpha(opacity=50); /* 針對 IE8 以及更早的版本 */
}
RGBA
用法:
#box{
background-color: rgba(0, 0, 0, .5);
}
RGBA 顏色值是 RGB 顏色值的擴展,帶有一個 alpha 通道 - 它規定了對象的不透明度。
RGBA 顏色值得到以下瀏覽器的支持:IE9+、Firefox 3+、Chrome、Safari 以及 Opera 10+。
RGBA 顏色值是這樣規定的:rgba(red, green, blue, alpha)。alpha 參數是介於 0.0(完全透明)與 1.0(完全不透明)的數字。
那麼對於IE8及以下需要做以下兼容:
#box{
filter: progid:DXImageTransform.Microsoft.Gradient(startColorStr=#80000000,endColorStr=#80000000);
}
其中:#88000000 的前兩位數字控制透明度,取值16進制從00 -> FF(越小越透明),00表示完全透明,FF就是全不透明,後面六位是色值。
※注意:
如果在IE9裏面同時使用這RGBA兩種方法時,會造成衝突而無法做到透明度的實現。
而對於opacity是可以兩個一起寫,沒有衝突問題!
opacity 和 rgba 的區別
爲此我們設置了兩個盒子來作爲對比
html代碼:
<div id="box1">
<div class="pane"></div>
box1-opacity演示效果
</div>
<div id="box2">
<div class="pane"></div>
box2-rgba演示效果
</div>
css代碼:
#box1{
width: 100px;
height: 100px;
color:black;
background-color:rgb(125,25,0);
opacity: 0.5;
}
#box2{
margin-top: 10px;
width: 100px;
height: 100px;
color:black;
background-color: rgba(125,25,0, .5);
}
.pane{
width: 20px;
height: 20px;
background-color:red;
}
結果如圖:
從上面的結果我們可以看到 opacity 可以影響字體以及紅色小方塊的透明度,而 rgba 不會。
說明了子元素會繼承父元素的 opacity 屬性
至於兩種屬性怎麼使用,效果圖已經放在這裏了,各位可以嘗試一下