CSS3中使用RGBA设置透明度的示例
WEB前端开发 发布时间：2015-08-04 17:24:44 作者：佚名 
我要评论
我要评论这篇文章主要介绍了CSS3中使用RGBA设置透明度的示例,即在传统的RGB值上增添调节透明度的Alpha值,需要的朋友可以参考下
说明：
RGBA(R,G,B,A)
取值：
R：红色值。正整数 | 百分数
G：绿色值。正整数 | 百分数
B：蓝色值。正整数 | 百分数
A：Alpha透明度。取值0~1之间。
下面是用rgba() 设置50%透明度的白色.
CSS Code复制内容到剪贴板
- p {
- color: rgba(255, 255, 255, 0.5);
- }
RGBA是RGB色彩模型的一个扩展。这个缩写词代表红绿蓝三原色的首字母，Alpha值代表颜色的透明度/不透明度。
RGBA色彩表示法的格式为：:
CSS Code复制内容到剪贴板
- rgba(red, green, blue, alpha)
前三个值（红绿蓝）的范围为0到255之间的整数或者0%到100%之间的百分数。这些值描述了红绿蓝三原色在预期色彩中的量。
如果你想设置纯红色，那么把red参数设置满，即255，绿，蓝设置0即可。
CSS Code复制内容到剪贴板
- background-color: rgba(255, 0, 0, 1);
结果:
也可使用百分比:
CSS Code复制内容到剪贴板
- background-color: rgba(100%, 0%, 0%, 1);
结果:
第四个值, alpha, 制定了色彩的透明度/不透明度，它的范围为0.0到1.0之间
下面的例子是设置50%透明度的黄色:
CSS Code复制内容到剪贴板
- color: rgba(255, 242, 0, 0.5);
结果:
相关文章
CSS3之前渐变色图片只能用背景图片，CSS3的渐变色语法可以让我们省去下载图片的开销，并且在改变浏览器分辨率时有更好的效果，这里就为大家介绍一下,需要的朋友可以参考下2020-03-06- 移动浏览器中页面点击某个元素时会出现闪动的色块,也算是比较常见的问题了,这里我们就来讲通过-webkit-tap-highlight-color:rgba(0,0,0,0)属性来用CSS3解决移动页面上点击2016-06-03
- 这篇文章主要介绍了CSS3中使用RGBa来调节透明度的教程,RGBA是RGB色彩模型的一个扩展,这个缩写词代表红绿蓝三原色的首字母,Alpha值代表颜色的透明度或者说不透明度,需要的朋2016-05-09
- 我们今天需要讨论的RGBA。如果需要更详细的解说，大家就跟着我一起往下看吧2013-08-06
这篇文章主要介绍了CSS3 rgb and rgba（透明色）的使用详解，本文给大家介绍的非常详细，对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下2020-09-25
最新评论