css透明度之rgba和opacity的區(qū)別及兼容

genedna 發(fā)布于2019-08-30 15:55 / 2471人閱讀

摘要：對于設置透明度，我們有兩個可以選的屬性和用法和使用屬性來設定透明度。值越小，越透明。參數是介于完全透明與完全不透明的數字。注意如果在里面同時使用這兩種方法時，會造成沖突而無法做到透明度的實現。說明了子元素會繼承父元素的屬性

對于設置透明度，我們有兩個可以選的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 通道 - 它規(guī)定了對象的不透明度。

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

RGBA 顏色值是這樣規(guī)定的：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 的區(qū)別

為此我們設置了兩個盒子來作為對比

html代碼：


    
    box1-opacity演示效果


    
    box2-rgba演示效果

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 屬性

GPU云服務器云服務器 css和html的區(qū)別 html和css的區(qū)別 html和css區(qū)別 html和css有什么區(qū)別

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規(guī)行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/117209.html

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

摘要：瀏覽器的兼容性如果龐統(tǒng)說是制作透明色透明背景色透明邊框色透明前景色等，大家不由會想起這個東西。 Background背景色透明RGBA時間:2013-03-16 00:44│來自: 信有UED│作者:JUN│點擊:9704次RGB不用說，大家都知道是什么，但RGBA是什么呢？ 1 2 background : rgb ( 0 , 0 , 0 ) ; background : rgba ...

Pines_Cheng 2019-08-02 15:55 評論0 收藏0
Background背景色透明RGBA和opacity的對比實例（轉載）

摘要：瀏覽器的兼容性如果龐統(tǒng)說是制作透明色透明背景色透明邊框色透明前景色等，大家不由會想起這個東西。 Background背景色透明RGBA時間:2013-03-16 00:44│來自: 信有UED│作者:JUN│點擊:9704次RGB不用說，大家都知道是什么，但RGBA是什么呢？ 1 2 background : rgb ( 0 , 0 , 0 ) ; background : rgba ...

jindong 2019-08-30 13:04 評論0 收藏0
CSS2-盒模型、背景圖片

摘要：合并后的外邊距的高度等于兩個發(fā)生合并的外邊距的高度中的較大者。雪碧圖的使用背景圖與元素的原點重合。白色框是元素，綠色框是背景圖片。盒模型屬性 margin外邊距（top,right,bottom,left）border邊框(top,right,bottom,left)padding內邊距(top,right,bottom,left)content內容區(qū)(width,height)ma...

yuanzhanghu 2019-08-29 15:33 評論0 收藏0
CSS學習摘要-數值和單位及顏色

摘要：每對十六進制數代表一個通道紅色綠色或者藍色允許我們指定個可用值。例如，這個代碼給出以下結果這些值比較復雜，不太容易理解，但是它們比關鍵字更靈活您可以使用十六進制值來表示您想要在顏色方案中使用的任何顏色。在CSS中，值的類型有很多種，一些很常見，一些你卻幾乎沒怎么遇到過。我們不會在這篇文檔中面面俱到地描述他們，而只是這些對于掌握CSS可能最有用處的這些。本文將會涉及如下CSS的值：數值: ...

luckyyulin 2019-04-23 13:40 評論0 收藏0
前端面試寶典

摘要：優(yōu)雅降級觀點優(yōu)雅降級觀點認為應該針對那些最高級最完善的瀏覽器來設計網站。面試官希望聽到是。在前端構建中應該考慮微格式嗎微格式是一種讓機器可讀的語義化詞匯的集合，是結構化數據的開放標準。一、HTML和CSS 你做的頁面在哪些流覽器測試過？這些瀏覽器的內核分別是什么?IE: trident內核Firefox：gecko內核Safari:webkit內核Opera:以前是presto內核...

ChanceWong 2019-08-29 12:31 評論0 收藏0