当前位置： 移动技术网 > IT编程>网页制作>CSS > CSS3的RGBA中关于整数和百分比值的转换

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

2019年07月25日  | 移动技术网IT编程  | 我要评论

如何把整数转换为百分数

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

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

css code复制内容到剪贴板
  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);  

结果:
201584175100801.jpg (799×224)

如何把百分数转换为整数

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

来个橙色的例子:
 

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

结果:

css code复制内容到剪贴板
  1. red: (100% x 255) / 100% = 255   
  2. green: (64.7% x 255) / 100% = 165 (四舍五入到最接近的整数)   
  3. blue: (0% x 255) / 100% = 0   
  4. alpha: 1  

转化成整数后的值为:
 

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


浏览器支持
rgba颜色现在在webkit 和gecko 核心的浏览器被支持，ie各个版本的浏览器和opera还都不支持。就像chris在他里 提到的，你可以使用一个标准的rgb颜色为那些不支持的浏览器指定一个向下兼容的属性。

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

另一个。

您可能感兴趣的文章:

如对本文有疑问， 点击进行留言回复！！

相关文章:

验证码：
最近更新的文章
大家感兴趣的文章
移动技术网