CSS3的RGBA中关于整数和百分比值的转换
WEB前端开发 发布时间：2015-08-04 17:44:02 作者：佚名 
我要评论
我要评论这篇文章主要介绍了CSS3的RGBA中关于整数和百分比值的转换,同时提到了关于浏览器的支持问题,需要的朋友可以参考下
如何把整数转换为百分数
前面提到了，使用百分数值代替整数值来表示红、绿、蓝三原色的量，最后得到的结果是相同的。0代表0%，255就表示100%。为了让百分数等值，你只需要让整数值除以255然后乘以100%就可以了。
上面的例子中，如果RGBA色彩值是rgba（255,242,0,0.5），那么
CSS Code复制内容到剪贴板
- 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后去掉百分号）
来个橙色的例子:
CSS Code复制内容到剪贴板
- rgba(100%, 64.7%, 0%, 1)
结果:
CSS Code复制内容到剪贴板
- Red: (100% x 255) / 100% = 255
- Green: (64.7% x 255) / 100% = 165 (四舍五入到最接近的整数)
- Blue: (0% x 255) / 100% = 0
- Alpha: 1
转化成整数后的值为:
CSS Code复制内容到剪贴板
- rgba(255, 165, 0, 1)
浏览器支持
RGBa颜色现在在Webkit 和Gecko 核心的浏览器被支持，IE各个版本的浏览器和Opera还都不支持。就像Chris在他关于RGBa的精彩的文章里 提到的，你可以使用一个标准的RGB颜色为那些不支持的浏览器指定一个向下兼容的属性。
CSS Code复制内容到剪贴板
- div {
- background: rgb(200, 54, 54); /* The Fallback */
- background: rgba(200, 54, 54, 0.5);
- }
另一个渐进增强或适度降级的例子。
相关文章
- 对于css的二维世界，相信大家都不陌生。在二维的世界里，我们可以对元素设置宽高、位置、旋转、背景等等。在css三维世界里，扩展出了一个z轴，这个z轴垂直于屏幕并指向外面2017-05-02
- 这篇文章主要介绍了用css3实现转换过渡和动画效果，本文通过实例代码给大家介绍的非常详细，具有一定的参考借鉴价值,需要的朋友可以参考下2020-03-13
- 众所周知在css3中出现了许多新的特性，其中2D转换我觉的非常有意思，通过它我们能够对元素进行移动、缩放、转动、拉长或者拉伸，所以希望在这里和大家分享一下。有需要的朋2016-12-23
这篇文章主要介绍了css3带你实现3D转换效果,本篇的3D转换就是基于原来的2D转换而来，与2D转换的功能相似，本文通过实例代码给大家介绍的非常详细，需要的朋友可以参考下2022-02-18
最新评论