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

红粒炊畲粟,青烟郁涧薪。得床思熟睡,寒犬苦狺狺。一生之中至少要有两次冲动,一次为奋不顾身的爱情,一次为说走就走的旅行。

如何把整数转换为百分数

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

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

CSS Code复制内容到剪贴板
  1. Red:(255/255)x100%=100%
  2. Green:(242/255)x100%=94.9%
  3. Blue:(0/255)x100%=0%
  4. Alpha:0.5
  5. color:rgba(100%,94.9%,0%,0.5);

结果:

如何把百分数转换为整数

其实只要把上面的倒过来即可,即把百分比数值乘以255,再乘以100%(即乘以255后去掉百分号)

来个橙色的例子:

CSS Code复制内容到剪贴板
  1. rgba(100%,64.7%,0%,1)

结果:

CSS Code复制内容到剪贴板
  1. Red:(100%x255)/100%=255
  2. Green:(64.7%x255)/100%=165(四舍五入到最接近的整数)
  3. Blue:(0%x255)/100%=0
  4. Alpha:1

转化成整数后的值为:

CSS Code复制内容到剪贴板
  1. rgba(255,165,0,1)


浏览器支持
RGBa颜色现在在Webkit 和Gecko 核心的浏览器被支持,IE各个版本的浏览器和Opera还都不支持。就像Chris在他关于RGBa的精彩的文章里 提到的,你可以使用一个标准的RGB颜色为那些不支持的浏览器指定一个向下兼容的属性。

CSS Code复制内容到剪贴板
  1. div{
  2. background:rgb(200,54,54);/*TheFallback*/
  3. background:rgba(200,54,54,0.5);
  4. }

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

到此这篇关于CSS3的RGBA中一篇关于整数和百分比值的转换就介绍到这了。有些事情本身我们无法控制,只好控制自己。更多相关CSS3的RGBA中一篇关于整数和百分比值的转换内容请查看相关栏目,小编编辑不易,再次感谢大家的支持!

您可能有感兴趣的文章
一篇关于CSS浮动与取消浮动的问题

一篇关于CSS中定位的小结

一个一篇关于border-radius值设置的问题记录

一篇关于css中line-height(行高)设置无效的问题的如何解决方法

一篇关于CSS引入方式的详细见解小结