CSS3的RGBA中有关整数金额和百分比值的变换

日期:2021-03-05 类型:科技新闻 

关键词:快速建站,网站建设系统,免费网页建站,网站免费建设,建站系统

怎样把整数金额变换为百分数

前面提到了,应用百分标值替代整数金额值来表明红、绿、蓝3原色的量,最终获得的結果是同样的。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);  

結果:

怎样把百分数变换为整数金额

实际上要是把上面的倒过来便可,即把百分比标值乘以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 (4舍5入到最贴近的整数金额)   
  3. Blue: (0% x 255) / 100% = 0   
  4. Alpha: 1  

转换成整数金额后的值为:
 

CSS Code拷贝內容到剪贴板
  1. rgba(255, 165, 0, 1)  


访问器适用
RGBa色调如今在Webkit 和Gecko 关键的访问器被适用,IE各个版本号的访问器和Opera还都不适用。就像Chris在他有关RGBa的精彩的文章内容里 提到的,你可使用1个规范的RGB色调为那些不适用的访问器特定1个向下适配的特性。

CSS Code拷贝內容到剪贴板
  1. div {     
  2.    backgroundrgb(200, 54, 54); /* The Fallback */  
  3.    background: rgba(200, 54, 54, 0.5);   
  4. }  

另外一个渐进提高或适当退级的事例。

上一篇:CSS学习培训总结 返回下一篇:没有了