RGBa顏色 css3的Alpha通道支援

weixin_34104341發表於2020-04-07
CSSS3

　　　　CSS3中，RGBa 為顏色宣告新增Alpha通道。

　　　　RGB值被指定使用3個8位無符號整數(0 – 255)並分別代表紅色、藍色、和綠色。增加的一個alpha通道並不是一個顏色通道——它只是用來指定除其它三個通道提供的顏色資訊之外的透明度。

　　　　

<ul>
    <li class="hundred">100%</li>
    <li class="eighty">80%</li>
    <li class="sixty">60%</li>
    <li class="forty">40%</li>
    <li class="twenty">20%</li>
</ul>

CSS樣式

ul{list-style: none}
ul li{padding:.5em}
ul li.hundred{background:rgba(0,0,255,1)}
ul li.eighty{background:rgba(0,0,255,0.8)}
ul li.sixty{background:rgba(0,0,255,0.6)}
ul li.forty{background:rgba(0,0,255,0.4)}
ul li.twenty{background:rgba(0,0,255,0.2)}

相容性寫法

　　

div {
   background: rgb(200, 54, 54); /* 向下相容 */
   background: rgba(200, 54, 54, 0.5);
}

　　　　　　　　瀏覽器對”color:rgb” 和”color:rgba” 是分開處理的。　　　　　　　　

RGBa的瀏覽器支援情況

瀏覽器，版本，作業系統測試結果退路
Firefox 3.0+ 支援 —
Firefox 2.0- 不支援 純色
webkit -safari 3.x+ 支援 —
webkit -safari 2.0- 不支援 –
Mobile Safari (iPhone/iPod Touch /iPad) 支援 —
opera 10.x+ 支援 —
Opera 9.x- 不支援 純色
IE 5.5 - 不支援 無色
IE 6-8 不支援 純色
IE 9 支援 —
Google Chrome 所有版本 支援 —
Netscape 所有版本 不支援 沒有顏色
SeaMonkey 1.1.x 不支援 無色
SeaMonkey 2.0 + 支援 —
BlackBerry Storm Browser 支援 –

IE下面的實現：

<!--[if IE]>
   <style type="text/css">
   .color-block {
       background:transparent;
       filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=#99000050,endColorstr=#99000050);
       zoom: 1;
    } 
    </style>
<![endif]-->

 

轉載於:https://www.cnblogs.com/dying/p/3346192.html

相關文章