v 如何把整數轉換為百分數
前面提到了,使用百分數值代替整數值來表示紅、綠、藍三原色的量,最後得到的結果是相同的。0代表0%,255就表示100%。為了讓百分數等值,你只需要讓整數值除以255然後乘以100%就可以了。
上面的例子中,如果RGBA色彩值是rgba(255,242,0,0.5),那麼
CSS Code復制內容到剪貼板
Red: (255/255) x 100% = 100%
Green: (242/255) x 100% = 94.9%
Blue: (0/255) x 100% = 0%
Alpha: 0.5
color: rgba(100%, 94.9%, 0%, 0.5);
結果:
如何把百分數轉換為整數
其實只要把上面的倒過來即可,即把百分比數值乘以255,再乘以100%(即乘以255後去掉百分號)
來個橙色的例子:
CSS Code復制內容到剪貼板
rgba(100%, 64.7%, 0%, 1)
結果:
CSS Code復制內容到剪貼板
Red: (100% x 255) / 100% = 255
Green: (64.7% x 255) / 100% = 165 (四捨五入到最接近的整數)
Blue: (0% x 255) / 100% = 0
Alpha: 1
轉化成整數後的值為:
CSS Code復制內容到剪貼板
rgba(255, 165, 0, 1)
浏覽器支持
RGBa顏色現在在Webkit 和Gecko 核心的浏覽器被支持,IE各個版本的浏覽器和Opera還都不支持。就像Chris在他關於RGBa的精彩的文章裡 提到的,你可以使用一個標准的RGB顏色為那些不支持的浏覽器指定一個向下兼容的屬性。
CSS Code復制內容到剪貼板
div {
background: rgb(200, 54, 54); /* The Fallback */
background: rgba(200, 54, 54, 0.5);
}
另一個漸進增強或適度降級的例子。