欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

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

WEB前端開發(fā)   發(fā)布時(shí)間：2015-08-04 17:44:02   作者：佚名   我要評(píng)論
這篇文章主要介紹了CSS3的RGBA中關(guān)于整數(shù)和百分比值的轉(zhuǎn)換,同時(shí)提到了關(guān)于瀏覽器的支持問(wèn)題,需要的朋友可以參考下

如何把整數(shù)轉(zhuǎn)換為百分?jǐn)?shù)

前面提到了，使用百分?jǐn)?shù)值代替整數(shù)值來(lái)表示紅、綠、藍(lán)三原色的量，最后得到的結(jié)果是相同的。0代表0%，255就表示100%。為了讓百分?jǐn)?shù)等值，你只需要讓整數(shù)值除以255然后乘以100%就可以了。

上面的例子中，如果RGBA色彩值是rgba（255,242,0,0.5），那么

CSS Code復(fù)制內(nèi)容到剪貼板
  1.     Red: (255/255) x 100% = 100%   
  2.     Green: (242/255) x 100% = 94.9%   
  3.     Blue: (0/255) x 100% = 0%   
  4.     Alpha: 0.5   
  5.   
  6. color: rgba(100%, 94.9%, 0%, 0.5);  

結(jié)果:
201584175100801.jpg (799×224)

如何把百分?jǐn)?shù)轉(zhuǎn)換為整數(shù)

其實(shí)只要把上面的倒過(guò)來(lái)即可，即把百分比數(shù)值乘以255，再乘以100%（即乘以255后去掉百分號(hào)）

來(lái)個(gè)橙色的例子:
 

CSS Code復(fù)制內(nèi)容到剪貼板
  1. rgba(100%, 64.7%, 0%, 1)  

結(jié)果:

CSS Code復(fù)制內(nèi)容到剪貼板
  1. Red: (100% x 255) / 100% = 255   
  2. Green: (64.7% x 255) / 100% = 165 (四舍五入到最接近的整數(shù))   
  3. Blue: (0% x 255) / 100% = 0   
  4. Alpha: 1  

轉(zhuǎn)化成整數(shù)后的值為:
 

CSS Code復(fù)制內(nèi)容到剪貼板
  1. rgba(255, 165, 0, 1)  


瀏覽器支持
RGBa顏色現(xiàn)在在Webkit 和Gecko 核心的瀏覽器被支持，IE各個(gè)版本的瀏覽器和Opera還都不支持。就像Chris在他關(guān)于RGBa的精彩的文章里 提到的，你可以使用一個(gè)標(biāo)準(zhǔn)的RGB顏色為那些不支持的瀏覽器指定一個(gè)向下兼容的屬性。

CSS Code復(fù)制內(nèi)容到剪貼板
  1. div {     
  2.    background: rgb(200, 54, 54); /* The Fallback */  
  3.    background: rgba(200, 54, 54, 0.5);   
  4. }  

另一個(gè)漸進(jìn)增強(qiáng)或適度降級(jí)的例子。

相關(guān)文章

  • 利用HTML5+CSS3實(shí)現(xiàn)3D轉(zhuǎn)換效果實(shí)例詳解

    對(duì)于css的二維世界，相信大家都不陌生。在二維的世界里，我們可以對(duì)元素設(shè)置寬高、位置、旋轉(zhuǎn)、背景等等。在css三維世界里，擴(kuò)展出了一個(gè)z軸，這個(gè)z軸垂直于屏幕并指向外面
    2017-05-02

  • 用css3實(shí)現(xiàn)轉(zhuǎn)換過(guò)渡和動(dòng)畫效果

    這篇文章主要介紹了用css3實(shí)現(xiàn)轉(zhuǎn)換過(guò)渡和動(dòng)畫效果，本文通過(guò)實(shí)例代碼給大家介紹的非常詳細(xì)，具有一定的參考借鑒價(jià)值,需要的朋友可以參考下
    2020-03-13

  • css3學(xué)習(xí)之2D轉(zhuǎn)換功能詳解

    眾所周知在css3中出現(xiàn)了許多新的特性，其中2D轉(zhuǎn)換我覺的非常有意思，通過(guò)它我們能夠?qū)υ剡M(jìn)行移動(dòng)、縮放、轉(zhuǎn)動(dòng)、拉長(zhǎng)或者拉伸，所以希望在這里和大家分享一下。有需要的朋
    2016-12-23

  • css3帶你實(shí)現(xiàn)3D轉(zhuǎn)換效果

    這篇文章主要介紹了css3帶你實(shí)現(xiàn)3D轉(zhuǎn)換效果,本篇的3D轉(zhuǎn)換就是基于原來(lái)的2D轉(zhuǎn)換而來(lái)，與2D轉(zhuǎn)換的功能相似，本文通過(guò)實(shí)例代碼給大家介紹的非常詳細(xì)，需要的朋友可以參考下
    2022-02-18

最新評(píng)論