對(duì)于設(shè)置透明度，我們有兩個(gè)可以選的css3屬性：rgba 和 opacity

opacity

用法：

#box{
    background-color:rgb(125,25,0);
    opacity: 0.5
}

IE9, Firefox, Chrome, Opera 和 Safari 使用屬性 opacity 來(lái)設(shè)定透明度。

opacity 屬性能夠設(shè)置的值從 0.0 到 1.0。值越小，越透明。

IE8 以及更早的版本使用濾鏡 filter:alpha(opacity=x)。x 能夠取的值從 0 到 100。值越小，越透明。

所以如果項(xiàng)目為了要兼容IE8及以下，則需要寫兩段代碼

#box{
    background-color:rgb(125,25,0);
    opacity: 0.5;
    filter:alpha(opacity=50); /* 針對(duì) IE8 以及更早的版本 */
}

RGBA

用法：

#box{
    background-color: rgba(0, 0, 0, .5);
}

RGBA 顏色值是 RGB 顏色值的擴(kuò)展，帶有一個(gè) alpha 通道 - 它規(guī)定了對(duì)象的不透明度。

RGBA 顏色值得到以下瀏覽器的支持：IE9+、Firefox 3+、Chrome、Safari 以及 Opera 10+。

RGBA 顏色值是這樣規(guī)定的：rgba(red, green, blue, alpha)。alpha 參數(shù)是介于 0.0（完全透明）與 1.0（完全不透明）的數(shù)字。

那么對(duì)于IE8及以下需要做以下兼容：

#box{
    filter: progid:DXImageTransform.Microsoft.Gradient(startColorStr=#80000000,endColorStr=#80000000);
}

其中：#88000000 的前兩位數(shù)字控制透明度，取值16進(jìn)制從00 -> FF（越小越透明），00表示完全透明，F(xiàn)F就是全不透明，后面六位是色值。

**※注意：

如果在IE9里面同時(shí)使用這RGBA兩種方法時(shí)，會(huì)造成沖突而無(wú)法做到透明度的實(shí)現(xiàn)。
而對(duì)于opacity是可以兩個(gè)一起寫，沒(méi)有沖突問(wèn)題！**

opacity 和 rgba 的區(qū)別

為此我們?cè)O(shè)置了兩個(gè)盒子來(lái)作為對(duì)比

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;
}

結(jié)果如圖：

從上面的結(jié)果我們可以看到 opacity 可以影響字體以及紅色小方塊的透明度，而 rgba 不會(huì)。

說(shuō)明了子元素會(huì)繼承父元素的 opacity 屬性

以上就是本文的全部?jī)?nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。

最新評(píng)論