CSS3的RGBA中關(guān)于整數(shù)和百分比值的轉(zhuǎn)換
WEB前端開發(fā) 發(fā)布時間：2015-08-04 17:44:02 作者：佚名 
我要評論
我要評論這篇文章主要介紹了CSS3的RGBA中關(guān)于整數(shù)和百分比值的轉(zhuǎn)換,同時提到了關(guān)于瀏覽器的支持問題,需要的朋友可以參考下
如何把整數(shù)轉(zhuǎn)換為百分數(shù)
前面提到了，使用百分數(shù)值代替整數(shù)值來表示紅、綠、藍三原色的量，最后得到的結(jié)果是相同的。0代表0%，255就表示100%。為了讓百分數(shù)等值，你只需要讓整數(shù)值除以255然后乘以100%就可以了。
上面的例子中，如果RGBA色彩值是rgba（255,242,0,0.5），那么
CSS Code復(fù)制內(nèi)容到剪貼板
- 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后去掉百分號）
來個橙色的例子:
CSS Code復(fù)制內(nèi)容到剪貼板
- rgba(100%, 64.7%, 0%, 1)
結(jié)果:
CSS Code復(fù)制內(nèi)容到剪貼板
- 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ù)后的值為:
CSS Code復(fù)制內(nèi)容到剪貼板
- rgba(255, 165, 0, 1)
瀏覽器支持
RGBa顏色現(xiàn)在在Webkit 和Gecko 核心的瀏覽器被支持，IE各個版本的瀏覽器和Opera還都不支持。就像Chris在他關(guān)于RGBa的精彩的文章里 提到的，你可以使用一個標(biāo)準(zhǔn)的RGB顏色為那些不支持的瀏覽器指定一個向下兼容的屬性。
CSS Code復(fù)制內(nèi)容到剪貼板
- 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
