CSS Opacity(透明度)

opacity CSS屬性指定元素的透明度。opacity屬性指定了一個元素的透明度。換言之，opacity屬性指定了一個元素后面的背景的被覆蓋程度。

跨瀏覽器透明度

現(xiàn)在，透明度(opacity )是CSS3規(guī)范的一部分，但是它存在了很長時間。但是，較舊的瀏覽器具有不同的方式來指定不透明度或透明度。

Firefox，Safari，Chrome，Opera和IE9中的CSS不透明度

這是所有當前瀏覽器中CSS不透明度的最新語法。

p {
    opacity: 0.7;
}

上面的樣式規(guī)則將使段落元素70％不透明（或30％透明）。

opacity屬性的取值范圍為0.0到1.0。設(shè)置為opacity:?1;會使元素完全不透明（即0％透明），opacity:?0;而使元素完全透明（即100％透明）。

Internet Explorer 8及更低版本中的CSS透明度實現(xiàn)方法

Internet Explorer 8和更早版本支持僅Microsoft的屬性“ alpha過濾器”來指定元素的透明度。

p {
    filter: alpha(opacity=50);
    zoom: 1;  /* Fix for IE7 */
}

兼容所有瀏覽器的CSS透明度

結(jié)合以上兩個步驟，您將獲得所有瀏覽器的透明性代碼。

p {
    opacity: 0.5;  /* Opacity for Modern Browsers */
    filter: alpha(opacity=50);  /* Opacity for IE8 and lower */
    zoom: 1;  /* Fix for IE7 */
}

CSS圖像透明度

您還可以使用CSS Opacity制作透明圖像。

下圖中的三個圖像均來自同一源圖像。它們之間的唯一區(qū)別是它們的透明度。

opacity:1	opacity:0.5	opacity:0.25

鼠標懸停時更改圖像透明度

以下示例演示了CSS圖像透明度的常見用法，其中，當用戶將鼠標指針移到圖像上時，圖像的透明度會發(fā)生變化。

—將鼠標指針移到圖像上以查看效果。

透明框中的文字

在元素上使用不透明度時，不僅元素的背景將具有透明度，而且其所有子元素也將變?yōu)橥该?。如果不透明度的值變高，將使透明元素?nèi)部的文本難以閱讀。

為了防止這種情況，您可以使用透明的PNG圖像，也可以將文本塊放在透明框的外面，然后使用負邊距或CSS定位將其可視地推入內(nèi)部。

div {
    float: left;
    opacity: 0.7;
    border: 1px solid #949781;
}
p {
    float: left;
    position: relative;
    margin-left: -400px;
}

使用RGBA的CSS透明度

除RGB外，CSS3還引入了一種新的方法RGBA來指定一種顏色，該顏色包括alpha透明度作為顏色值的一部分。RGBA代表Red Blue Green Alpha。

RGBA聲明是設(shè)置顏色透明度的一種非常簡單的方法。

div {
    background: rgba(200, 54, 54, 0.5);
}
p {
    color: rgba(200, 54, 54, 0.25);
}

前三個數(shù)字表示RGB值中的顏色，即紅色（0-255），綠色（0-255），藍色（0-255），第四個數(shù)字表示介于0到1之間的alpha透明度值（0使顏色完全透明，而值1使其完全不透明）。

關(guān)于RGBA透明度需要注意的一個重要特征是-指定單個顏色的不透明度的能力。使用RGBA，我們可以使元素的文本顏色透明，并保持背景完整。

—或不理會文本顏色，僅更改背景的透明度。

您會看到使用RGBA可以輕松地指定單個顏色而不是整個元素的不透明度。但是，始終建議為不支持RGBA顏色的瀏覽器定義后備顏色。

RGBA聲明后備顏色

所有瀏覽器均不支持RGBA顏色。但是，您可以為不支持的瀏覽器提供其他選擇，例如純色或透明的PNG圖像。

p {
    /* Fallback for web browsers that doesn't support RGBA */
    background: rgb(0, 0, 0);
    /* RGBa with 0.5 opacity */
    background: rgba(0, 0, 0, 0.5);
}