您好,登錄后才能下訂單哦!
今天就跟大家聊聊有關CSS3的RGBA中關于整數(shù)和百分比值的轉換的示例分析,可能很多人都不太了解,為了讓大家更加了解,小編給大家總結了以下內容,希望大家根據(jù)這篇文章可以有所收獲。
如何把整數(shù)轉換為百分數(shù)
前面提到了,使用百分數(shù)值代替整數(shù)值來表示紅、綠、藍三原色的量,最后得到的結果是相同的。0代表0%,255就表示100%。為了讓百分數(shù)等值,你只需要讓整數(shù)值除以255然后乘以100%就可以了。
上面的例子中,如果RGBA色彩值是rgba(255,242,0,0.5),那么
CSS
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);
結果:
如何把百分數(shù)轉換為整數(shù)
其實只要把上面的倒過來即可,即把百分比數(shù)值乘以255,再乘以100%(即乘以255后去掉百分號)
來個橙色的例子:
CSS
rgba(100%, 64.7%, 0%, 1)
結果:
CSS
Red: (100% x 255) / 100% = 255
Green: (64.7% x 255) / 100% = 165 (四舍五入到最接近的整數(shù))
Blue: (0% x 255) / 100% = 0
Alpha: 1
轉化成整數(shù)后的值為:
CSS
rgba(255, 165, 0, 1)
瀏覽器支持
RGBa顏色現(xiàn)在在Webkit 和Gecko 核心的瀏覽器被支持,IE各個版本的瀏覽器和Opera還都不支持。就像Chris在他關于RGBa的精彩的文章里 提到的,你可以使用一個標準的RGB顏色為那些不支持的瀏覽器指定一個向下兼容的屬性。
CSS
div {
background: rgb(200, 54, 54); /* The Fallback */
background: rgba(200, 54, 54, 0.5);
}
另一個漸進增強或適度降級的例子。
看完上述內容,你們對CSS3的RGBA中關于整數(shù)和百分比值的轉換的示例分析有進一步的了解嗎?如果還想了解更多知識或者相關內容,請關注億速云行業(yè)資訊頻道,感謝大家的支持。
免責聲明:本站發(fā)布的內容(圖片、視頻和文字)以原創(chuàng)、轉載和分享為主,文章觀點不代表本網(wǎng)站立場,如果涉及侵權請聯(lián)系站長郵箱:is@yisu.com進行舉報,并提供相關證據(jù),一經(jīng)查實,將立刻刪除涉嫌侵權內容。