CSS3的RGBA中关于整数和百分比值的转换

 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);

　　}

　　另一个渐进增强或适度降级的例子。

收藏此文 赞一下！() 打赏本站

如本文对您有帮助，就请建站学习网抽根烟吧！

支付宝打赏
微信打赏