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

資訊專欄INFORMATION COLUMN

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

jindong / 2287人閱讀

摘要：瀏覽器的兼容性如果龐統(tǒng)說是制作透明色透明背景色透明邊框色透明前景色等，大家不由會想起這個東西。

Background背景色透明RGBA
時間:2013-03-16 00:44│來自: 信有UED│作者:JUN│點擊:9704次
RGB不用說，大家都知道是什么，但RGBA是什么呢？ 1 2 background : rgb ( 0 , 0 , 0 ) ; background : rgba ( 0 , 0 , 0 , 0.5 ) ; 我們會發(fā)現(xiàn)RGBA里面新添加了一個值，但這個值又是什么呢？

RGB不用說，大家都知道是什么，但RGBA是什么呢？
background: rgb(0,0,0);
background: rgba(0, 0, 0,0.5);
我們會發(fā)現(xiàn)RGBA里面新添加了一個值，但這個值又是什么呢？最后這個值就是在RGB的基礎(chǔ)上加進了一個通道Alpha。
瀏覽器的兼容性：

如果龐統(tǒng)說rgba是制作透明色（透明背景色、透明邊框色、透明前景色等），大家不由會想起opacity 這個東西。現(xiàn)在我們先來看一個rgba和opacity的對比實例：
HTML代碼：

Opacity效果
 

     
    
  • 100%
    •  
    
  • 80%
    •      
    
  • 60%
    •      
    
  • 40%
    •      
    
  • 20%
    •      
    
  • 0
    •     

    

CSS3的RGBA效果
    

         
    
  • 1
    •      
    
  • 0.8
    •      
    
  • 0.6
    •      
    
  • 0.4
    •      
    
  • 0.2
    •      
    
  • 0
    •


CSS代碼：
li.opacity { float:left; width:50px; height:50px;}
li.opacity1{ background:rgb(255,255,0); opacity:1; filter:alpha(opaity=100);}
li.opacity2{ background:rgb(255,255,0); opacity:0.8; filter:alpha(opaity=80);}
li.opacity3{ background:rgb(255,255,0); opacity:0.6; filter:alpha(opaity=60);}
li.opacity4{ background:rgb(255,255,0); opacity:0.4; filter:alpha(opaity=40);}
li.opacity5{ background:rgb(255,255,0); opacity:0.2; filter:alpha(opaity=20);}
li.opacity6{ background:rgb(255,255,0); opacity:0; filter:alpha(opaity=0);}

li.rgba { float:left; width:50px; height:50px; }
li.rgba1{ background:rgba(255,255,0,1);}
li.rgba2{ background:rgba(255,255,0,0.8);}
li.rgba3{ background:rgba(255,255,0,0.6);}
li.rgba4{ background:rgba(255,255,0,0.4);}
li.rgba5{ background:rgba(255,255,0,0.2);}
li.rgba6{ background:rgba(255,255,0,0);}
效果：

效果中我們可以看出，他們相同之處就是背景色完全是一樣的，但區(qū)別就是一直讓大家覺得頭痛的問題，那就是opacity后代元素會隨著一起具有透明性，所以我們Opacity中的字隨著透明值下降越來越看不清楚，而RGBA不具有這樣的問題，但是其支持的瀏覽器中有一個占在大市場份額的IE不支持，這也就是讓我們需要去做兼容。
綜合上面的所述，規(guī)納出一個RGBA在實際應(yīng)用中的模式
.rgba {

background: rgb(0,0,0); /*The Fallback color,這里也可以使用一張圖片來代替*/  
background: rgba(0, 0, 0,0.5);  
-ms-filter: "progid:DXImageTransform.Microsoft.gradient(GradientType=1,startColorstr=#80000000,endColorstr=#80000000)"; /*Filter for IE8 */   
filter: progid:DXImageTransform.Microsoft.gradient(GradientType=1,startColorstr=#80000000, endColorstr=#80000000); /*Filter for older IEs */

}
或者
.bg{

background:rgba(0, 0, 0, 0.65)!important; 
filter:alpha(opacity=70);  
background:#000;

}
這里需要注意的是startColorStr和endColorStr的值#80000000,其中前兩位是十六進制的透明度80,也就是透明值為0.5而后面六位是十六進制的顏色#000000(black黑色)。
rgba不單可以應(yīng)用在background上，我們還可以應(yīng)用在只要設(shè)置了顏色的地方都可以使用，我在這里簡單的說一下幾種：
第一種：前景色color
HTML代碼

用rgba改變我的字體顏色


用rgba改變我的字體顏色


CSS代碼
.norgba-color{ color:rgb(255, 0, 0);}
.rgba-color { color:rgba(255, 0, 0,0.5);}
效果：

第二種：邊框色border-color
HTML代碼

用rgba改變我的邊框顏色


用rgba改變我的邊框顏色


CSS代碼
.norgba-border-color{ border:5px solid rgb(255,0,0); width: 200px; }
.rgba-border-color { border:5px solid rgba(255,0,0,0.5); width: 200px; }
效果：

第三種：字體的陰影色text-shadow
HTML代碼

用rgba改變我的字體陰影顏色


用rgba改變我的字體陰影顏色


CSS代碼
.norgba-text-shadow { text-shadow:0 2px 1px rgb(255,0,0);}
.rgba-text-shadow { text-shadow:0 2px 1px rgba(255,0,0,0.3);}
效果：

第四種：改變邊框陰影色
HTML代碼
p class="norgba-box-shadow">用rgba改變我的邊框陰影顏色


用rgba改變我的邊框陰影顏色


CSS代碼
.norgba-box-shadow{

border:5px solid green;  
width:200px;  
-webkit-box-shadow:0 2px 2px rgb(255,0,0);  
-moz-box-shadow:0 2px 2px rgb(255,0,0);  
box-shadow:0 2px 2px rgb(255,0,0);

}
.rgba-box-shadow {

border:5px solid green;  
width:200px;  
-webkit-box-shadow:0 2px 2px rgba(255,0,0,0.6);  
-moz-box-shadow:0 2px 2px rgba(255,0,0,0.6);  
box-shadow:0 2px 2px rgba(255,0,0,0.6);

}
效果：

通過上面瀏覽器兼容列表會發(fā)現(xiàn)不是所有的瀏覽器都支持RGBA，所以我們在用的時候也要考慮到這個情況。
當(dāng)前文章地址：http://www.shejicool.com/web/html_css/417.html

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

轉(zhuǎn)載請注明本文地址：http://systransis.cn/yun/115285.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

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

    luckyyulin 評論0 收藏0

  • 《CSS世界》筆記五：CSS層疊規(guī)則及元素隱藏

    摘要：元素層疊順序補充說明位于最下面的特指層疊上下文元素后面會詳解的邊框和背景色。界中可能有其他的層疊結(jié)界，而自身也可能處于其他層疊結(jié)界中。 上一篇：《CSS世界》筆記四：流的保護與破壞 寫在前面 《CSS世界》這本書還剩六章，但是這本書的精華部分主要是前面的內(nèi)容，這里僅把后面章節(jié)相對重要的內(nèi)容以博客展示，想著了解更多的小伙伴還是去閱讀原文的好，畢竟三百多頁的一本書并不是小小幾篇博客能完全說...

    godruoyi 評論0 收藏0

  • HTML與CSS中的顏色與單位個人分享

    摘要：顏色與單位安全色有中其中色彩有中非色彩中前景色與背景色前景色就是設(shè)置字體的顏色背景色就是為指定元素設(shè)置背景色瀏覽器默認(rèn)背景色的顏色為透明色顏色的命名使用單詞方式定義顏色目前主流瀏覽器識別種預(yù)定義顏色問題可選的顏色數(shù)量有限不同瀏覽器中存在 顏色與單位 Web安全色有216中其中色彩有210中,非色彩6中 前景色與背景色 前景色就是設(shè)置字體的顏色 背景色就是為指定元素設(shè)置背景色 - 瀏...

    PAMPANG 評論0 收藏0

發(fā)表評論

0條評論

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