RGB色彩模式(也翻譯為“紅綠藍”,比較少用)是工業界的一種顏色標準,是通過對紅(R)、綠(G)、藍(B)三個顏色通道的變化以及它們相互之間的疊加來得到各式各樣的顏色的,RGB即是代表紅、綠、藍三個通道的顏色,這個標準幾乎包括了人類視力所能感知的所有顏色,是目前運用最廣的顏色系統之一。
RGBA在RGB的基礎上多了控制alpha透明度的參數。以上R、G、B三個參數,正整數值的取值范圍為:0 – 255。百分數值的取值范圍為:0.0% – 100.0%。超出范圍的數值將被截至其最接近的取值極限。并非所有瀏覽器都支持使用百分數值。A參數,取值在0~1之間,不可為負值
RGBA語法:
div {
background: rgba(0, 0, 0, 0.5);
}
瀏覽器兼容性:
| 類型 | Internet Explorer | Firefox | Chrome | Opera | Safari |
|---|---|---|---|---|---|
| 版本 | (×)IE6 | (√)Firefox 3.0.10 | (√)Chrome 2.0.x | (√)Opera 9.64 | (√)Safari 4 |
| (×)IE7 | |||||
| (×)IE8 | |||||
| (√)IE9 |
RGBA和opacity的區別
opacity會使整個元素包括子元素透明,而RGBA僅僅是元素本事透明,子元素不透明。
下面具體講講怎樣讓IE瀏覽器支持RGBA顏色
一、CSSPIE
CSSPIE可以讓color、background、 box-shadow支持RGBA
示例:
div{
color:rgba(0,0,0,.5);
background:rgba(0,0,0,.5);
-pie-background:rgba(0,0,0,.5);/*IE6-8*/
box-shadow: 1px 1px rgba(0,0,0,.5);/*僅在未設置模糊值的情況下支持rgba*/
}
二、filter
通過IE濾鏡讓背景色透明,模擬rgba效果
示例:
.filter{
filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=#BF000000,endColorstr=#BF000000);
}
我們需要留意的是StartColorStr和EndColorStr的值,前兩位是十六進制的透明度,后面六位是十六進制的顏色。
換算方法:x=alpha*255 將計算的結果x轉換成十六進制即可
新聞熱點
疑難解答