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

时间:2021-05-08

如何把整数转换为百分数

前面提到了,使用百分数值代替整数值来表示红、绿、蓝三原色的量,最后得到的结果是相同的。0代表0%,255就表示100%。为了让百分数等值,你只需要让整数值除以255然后乘以100%就可以了。

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

CSS Code复制内容到剪贴板
  • Red:(255/255)x100%=100%
  • Green:(242/255)x100%=94.9%
  • Blue:(0/255)x100%=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%x255)/100%=255
  • Green:(64.7%x255)/100%=165(四舍五入到最接近的整数)
  • Blue:(0%x255)/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);
  • background:rgba(200,54,54,0.5);
  • }
  • 另一个渐进增强或适度降级的例子。

    声明:本页内容来源网络,仅供用户参考;我单位不保证亦不表示资料全面及准确无误,也不保证亦不表示这些资料为最新信息,如因任何原因,本网内容或者用户因倚赖本网内容造成任何损失或损害,我单位将不会负任何法律责任。如涉及版权问题,请提交至online#300.cn邮箱联系删除。

    相关文章