成人国产在线小视频_日韩寡妇人妻调教在线播放_色成人www永久在线观看_2018国产精品久久_亚洲欧美高清在线30p_亚洲少妇综合一区_黄色在线播放国产_亚洲另类技巧小说校园_国产主播xx日韩_a级毛片在线免费

資訊專欄INFORMATION COLUMN

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

genedna / 2494人閱讀

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

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

opacity

用法：

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

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

opacity 屬性能夠設(shè)置的值從 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 參數(shù)是介于 0.0（完全透明）與 1.0（完全不透明）的數(shù)字。

那么對于IE8及以下需要做以下兼容：

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

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

※注意：
如果在IE9里面同時使用這RGBA兩種方法時，會造成沖突而無法做到透明度的實現(xiàn)。
而對于opacity是可以兩個一起寫，沒有沖突問題！

opacity 和 rgba 的區(qū)別

為此我們設(shè)置了兩個盒子來作為對比

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

結(jié)果如圖：

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

說明了子元素會繼承父元素的 opacity 屬性

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

轉(zhuǎn)載請注明本文地址：http://systransis.cn/yun/117209.html

相關(guān)文章

  • Background背景色透明RGBA和opacity的對比實例（轉(zhuǎn)載）

    摘要：瀏覽器的兼容性如果龐統(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 評論0 收藏0

  • Background背景色透明RGBA和opacity的對比實例（轉(zhuǎn)載）

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

    jindong 評論0 收藏0

  • CSS2-盒模型、背景圖片

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

    yuanzhanghu 評論0 收藏0

  • CSS學(xué)習(xí)摘要-數(shù)值和單位及顏色

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

    luckyyulin 評論0 收藏0

  • 前端面試寶典

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

    ChanceWong 評論0 收藏0

發(fā)表評論

0條評論

最新活動
閱讀需要支付1元查看
<