五二脚本 手机端 m.52jb.net
特色栏目:PHP教程JavaScript正则表达式焦点幻灯片
页面导航:首页 > 网页制作 > Css > 正文内容

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

来源:脚本网发布时间:12-07浏览:914 次
这篇文章主要介绍了CSS3中RGBA属性中关于整数和百分比值的转换,同时提到了关于浏览器的支持问题,需要的朋友可以参考下

如何把整数转换为百分数

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

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

    Red: (255/255) x 100% = 100%   
    Green: (242/255) x 100% = 94.9%   
    Blue: (0/255) x 100% = 0%   
    Alpha: 0.5   
  
    color: rgba(100%, 94.9%, 0%, 0.5);  

结果:

如何把百分数转换为整数

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

来个橙色的例子:
 

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

结果:

    Red: (100% x 255) / 100% = 255   
    Green: (64.7% x 255) / 100% = 165 (四舍五入到最接近的整数)   
    Blue: (0% x 255) / 100% = 0   
    Alpha: 1  

转化成整数后的值为:
 

rgba(255, 165, 0, 1)

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

    div {     
       background: rgb(200, 54, 54); /* The Fallback */  
       background: rgba(200, 54, 54, 0.5);   
    } 
关于我们 - 联系我们 - 广告合作 - 网站地图 - 网站声明

QQ群:153638182  投稿邮箱: 578640261@qq.com  皖ICP备-14005058

严禁网站镜像,否则追究法律责任。未经www.52jb.net 同意,不得转载本网站上所有的源代码。

五二脚本每日更新大量关于网页制作网页特效php编程网站优化源码下载的实例教程。