CSS3的RGBA中關(guān)于整數(shù)和百分比值的轉(zhuǎn)換

如何把整數(shù)轉(zhuǎn)換為百分數(shù)
前面提到了,使用百分數(shù)值代替整數(shù)值來表示紅、綠、藍三原色的量,最后得到的結(jié)果是相同的。0代表0%,255就表示100%。為了讓百分數(shù)等值,你只需要讓整數(shù)值除以255然后乘以100%就可以了。
上面的例子中,如果RGBA色彩值是rgba(255,242,0,0.5),那么
- 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);
結(jié)果:
如何把百分數(shù)轉(zhuǎn)換為整數(shù)
其實只要把上面的倒過來即可,即把百分比數(shù)值乘以255,再乘以100%(即乘以255后去掉百分號)
來個橙色的例子:
- rgba(100%, 64.7%, 0%, 1)
結(jié)果:
- Red: (100% x 255) / 100% = 255
- Green: (64.7% x 255) / 100% = 165 (四舍五入到最接近的整數(shù))
- Blue: (0% x 255) / 100% = 0
- Alpha: 1
轉(zhuǎn)化成整數(shù)后的值為:
- rgba(255, 165, 0, 1)
瀏覽器支持
RGBa顏色現(xiàn)在在Webkit 和Gecko 核心的瀏覽器被支持,IE各個版本的瀏覽器和Opera還都不支持。就像Chris在他關(guān)于RGBa的精彩的文章里 提到的,你可以使用一個標(biāo)準(zhǔn)的RGB顏色為那些不支持的瀏覽器指定一個向下兼容的屬性。
- div {
- background: rgb(200, 54, 54); /* The Fallback */
- background: rgba(200, 54, 54, 0.5);
- }
另一個漸進增強或適度降級的例子。
相關(guān)文章
利用HTML5+CSS3實現(xiàn)3D轉(zhuǎn)換效果實例詳解
對于css的二維世界,相信大家都不陌生。在二維的世界里,我們可以對元素設(shè)置寬高、位置、旋轉(zhuǎn)、背景等等。在css三維世界里,擴展出了一個z軸,這個z軸垂直于屏幕并指向外面2017-05-02- 這篇文章主要介紹了用css3實現(xiàn)轉(zhuǎn)換過渡和動畫效果,本文通過實例代碼給大家介紹的非常詳細,具有一定的參考借鑒價值,需要的朋友可以參考下2020-03-13
css3學(xué)習(xí)之2D轉(zhuǎn)換功能詳解
眾所周知在css3中出現(xiàn)了許多新的特性,其中2D轉(zhuǎn)換我覺的非常有意思,通過它我們能夠?qū)υ剡M行移動、縮放、轉(zhuǎn)動、拉長或者拉伸,所以希望在這里和大家分享一下。有需要的朋2016-12-23- 這篇文章主要介紹了css3帶你實現(xiàn)3D轉(zhuǎn)換效果,本篇的3D轉(zhuǎn)換就是基于原來的2D轉(zhuǎn)換而來,與2D轉(zhuǎn)換的功能相似,本文通過實例代碼給大家介紹的非常詳細,需要的朋友可以參考下2022-02-18