web前端|前端问答
css3,rgba
web前端-前端问答
棋牌源码交易平台,vscode调试变量值,ubuntu 系统加密,tomcat挂载不上,京东爬虫json,mac php安装目录,梁山seo优化排名找哪家,成品网站管系统,discuz 扁平化模板lzw
RGB是一种色彩标准，是由红(R)、绿(G)、蓝(B)的变化以及相互叠加来得到各式各样的颜色。RGBA是在RGB的基础上增加了控制alpha透明度的参数。
手机版的分类信息源码,安装ubuntu 1604,tomcat任务管理器,cookies爬虫限制,php 必填,滨海一站式seo优化lzw
语法：
vr整站系统源码,ubuntu更改远程端口,python爬虫去除广告,php paginate,包头seo排名lzw
rgba(R,G,B,A)
参数：
R：红色值。正整数 | 百分数
G：绿色值。正整数 | 百分数
B：蓝色值。正整数| 百分数
A：透明度。取值0~1之间
取值区间：
：Hue(色调)。 0(或360)表示红色，120表示绿色，240表示蓝色，当然可取其他数值来确定其它颜色；
：Saturation(饱和度)。 取值为0%到100%之间的值；
：Lightness(亮度)。 取值为0%到100%之间的值；
：alpha(透明度)。 取值在0到1之间；
简单说明：
RGB 色彩模式（也翻译为“红绿蓝”，比较少用）是工业界的一种颜色标准，是通过对红(R)、绿(G)、蓝(B)三个颜色通道的变化以及它们相互之间的叠加来得到各式各样的颜色的，RGB即是代表红、绿、蓝三个通道的颜色，这个标准几乎包括了人类视力所能感知的所有颜色，是目前运用最广的颜色系统之一。
RGBA 在 RGB 的基础上多了控制 Alpha 透明度的参数。以上R、G、B三个参数，正整数值的取值范围为：0 – 255。百分数值的取值范围为：0.0% – 100.0%。超出范围的数值将被截至其最接近的取值极限。并非所有浏览器都支持使用百分数值。A参数，取值在0~1之间，不可为负值。
浏览器的兼容性：
如果庞统说 RGBA 是制作透明色（透明背景色、透明边框色、透明前景色等），大家不由会想起 opacity 这个东西。他在我们 CSS2 中制作背景色通常用到，可是要用他来制作边框色或都说前景色的话，那他就只能在边上站着了，有心无力呀。
现在我们先来看一个 RGBA 和 Opacity 的对比实例，HTML 代码：
Opacity效果
100% 80% 60% 40% 20% 0
CSS3的RGBA效果
1 0.8 0.6 0.4 0.2 0
我们分别给这两上 ul 中的 li 应用相关样式， 在 li.opacity 中我用使用 CSS2 中的 Opacity 而在 li.rgba 中我们使用 CSS3 的 RGBA新属性。
Opacity样式
li.opacity{ float: left; width: 50px; height: 50px;}li.opacity1 { background: rgb(255,255,0); opacity: 1; filter:alpha(opaity=100);}li.opacity2 { background: rgb(255,255,0); opacity: 0.8; filter:alpha(opaity=80);}li.opacity3 { background: rgb(255,255,0); opacity: 0.6; filter:alpha(opaity=60);}li.opacity4 { background: rgb(255,255,0); opacity: 0.4; filter:alpha(opaity=40);}li.opacity5 { background: rgb(255,255,0); opacity: 0.2; filter:alpha(opaity=20);}li.opacity6 { background: rgb(255,255,0); opacity: 0; filter:alpha(opaity=0);}
RGBA样：
li.rgba { float: left; width: 50px; height: 50px;}li.rgba1 { background: rgba(255,255,0,1);}li.rgba2 { background: rgba(255,255,0,0.8);}li.rgba3 { background: rgba(255,255,0,0.6);}li.rgba4 { background: rgba(255,255,0,0.4);}li.rgba5 { background: rgba(255,255,0,0.2);}li.rgba6 { background: rgba(255,255,0,0);}
我们来看看其效果：
效果中我们可以看出，他们相同之处就是背景色完全是一样的，但区别就是一直让大家觉得头痛的问题，那就是 Opacity 后代元素会随着一起具有透明性，所以我们 Opacity 中的字随着透明值下降越来越看不清楚，而 RGBA 不具有这样的问题。
（学习视频分享：css视频教学、web前端）
如果觉得《css3中rgba是什么》对你有帮助，请点赞、收藏，并留下你的观点哦！
