html5中文学习网

您的位置: 首页 > 视频教程 > CSS3视频教程 » 正文

CSS3的RGBA中关于整数和百分比值的转换_Div+Css教程

[ ] 已经帮助:人解决问题

 v  如何把整数转换为百分数uVrHTML5中文学习网 - HTML5先行者学习网

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

  上面的例子中,如果RGBA色彩值是rgba(255,242,0,0.5),那么uVrHTML5中文学习网 - HTML5先行者学习网

  CSS Code复制内容到剪贴板uVrHTML5中文学习网 - HTML5先行者学习网

  Red: (255/255) x 100% = 100%uVrHTML5中文学习网 - HTML5先行者学习网

  Green: (242/255) x 100% = 94.9%uVrHTML5中文学习网 - HTML5先行者学习网

  Blue: (0/255) x 100% = 0%uVrHTML5中文学习网 - HTML5先行者学习网

  Alpha: 0.5uVrHTML5中文学习网 - HTML5先行者学习网

  color: rgba(100%, 94.9%, 0%, 0.5);uVrHTML5中文学习网 - HTML5先行者学习网

  结果:uVrHTML5中文学习网 - HTML5先行者学习网

201584175100801.jpg (799×224)

  如何把百分数转换为整数uVrHTML5中文学习网 - HTML5先行者学习网

  其实只要把上面的倒过来即可,即把百分比数值乘以255,再乘以100%(即乘以255后去掉百分号)uVrHTML5中文学习网 - HTML5先行者学习网

  来个橙色的例子:uVrHTML5中文学习网 - HTML5先行者学习网

  CSS Code复制内容到剪贴板uVrHTML5中文学习网 - HTML5先行者学习网

  rgba(100%, 64.7%, 0%, 1)uVrHTML5中文学习网 - HTML5先行者学习网

  结果:uVrHTML5中文学习网 - HTML5先行者学习网

  CSS Code复制内容到剪贴板uVrHTML5中文学习网 - HTML5先行者学习网

  Red: (100% x 255) / 100% = 255uVrHTML5中文学习网 - HTML5先行者学习网

  Green: (64.7% x 255) / 100% = 165 (四舍五入到最接近的整数)uVrHTML5中文学习网 - HTML5先行者学习网

  Blue: (0% x 255) / 100% = 0uVrHTML5中文学习网 - HTML5先行者学习网

  Alpha: 1uVrHTML5中文学习网 - HTML5先行者学习网

  转化成整数后的值为:uVrHTML5中文学习网 - HTML5先行者学习网

  CSS Code复制内容到剪贴板uVrHTML5中文学习网 - HTML5先行者学习网

  rgba(255, 165, 0, 1)uVrHTML5中文学习网 - HTML5先行者学习网

  浏览器支持uVrHTML5中文学习网 - HTML5先行者学习网

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

  CSS Code复制内容到剪贴板uVrHTML5中文学习网 - HTML5先行者学习网

  div {uVrHTML5中文学习网 - HTML5先行者学习网

  background: rgb(200, 54, 54); /* The Fallback */uVrHTML5中文学习网 - HTML5先行者学习网

  background: rgba(200, 54, 54, 0.5);uVrHTML5中文学习网 - HTML5先行者学习网

  }uVrHTML5中文学习网 - HTML5先行者学习网

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

(责任编辑:)
推荐书籍
推荐资讯
关于HTML5先行者 - 联系我们 - 广告服务 - 友情链接 - 网站地图 - 版权声明 - 人才招聘 - 帮助