首 页最新软件下载排行文章资讯投稿发布下载专题
维维下载站
您的位置:首页编程开发网页制作HTML/CSS → CSS3的RGBA中关于整数与百分比值转换例子

CSS3的RGBA中关于整数与百分比值转换例子

来源:本站整理 发布时间:2015-8-5 8:35:51 人气:

CSS3的RGBA中关于整数与百分比值转换实例代码,使用百分数值代替整数值来表示红、绿、蓝三原色的量,最后得到的结果是相同的。0代表0%,255就表示100%。为了让百分数等值,你只需要让整数值除以255然后乘以100%即可。

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

  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在他关于RGBa的精彩的文章里 提到的,你可以使用一个标准的RGB颜色为那些不支持的浏览器指定一个向下兼容的属性。

CSS Code复制内容到剪贴板
  1. div {
  2. background: rgb(200, 54, 54); /* The Fallback */
  3. background: rgba(200, 54, 54, 0.5);
  4. }
相关下载
栏目导航
本类热门阅览