网站建设资讯

NEWS

网站建设资讯

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

今天就跟大家聊聊有关CSS3的RGBA中关于整数和百分比值的转换的示例分析,可能很多人都不太了解,为了让大家更加了解,小编给大家总结了以下内容,希望大家根据这篇文章可以有所收获。

创新新互联,凭借10多年的成都网站设计、网站制作经验,本着真心·诚心服务的企业理念服务于成都中小企业设计网站有1000多家案例。做网站建设,选创新互联建站

如何把整数转换为百分数

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

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

CSS 

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

结果:
CSS3的RGBA中关于整数和百分比值的转换的示例分析

如何把百分数转换为整数

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

来个橙色的例子:
 

CSS 

  1. rgba(100%, 64.7%, 0%, 1)  

结果:

CSS 

  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

  1. rgba(255, 165, 0, 1)  


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

CSS 

  1. div {     

  2.    background: rgb(200, 54, 54); /* The Fallback */  

  3.    background: rgba(200, 54, 54, 0.5);   

  4. }  

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

看完上述内容,你们对CSS3的RGBA中关于整数和百分比值的转换的示例分析有进一步的了解吗?如果还想了解更多知识或者相关内容,请关注创新互联行业资讯频道,感谢大家的支持。


文章名称:CSS3的RGBA中关于整数和百分比值的转换的示例分析
文章来源:http://cdweb.net/article/pgsdcg.html