CSS3中rgb与rgba的含义-创新互联

这篇“CSS3中rgb与rgba的含义”除了程序员外大部分人都不太理解，今天小编为了让大家更加理解“CSS3中rgb与rgba的含义”，给大家总结了以下内容，具有一定借鉴价值，内容详细步骤清晰，细节处理妥当，希望大家通过这篇文章有所收获，下面让我们一起来看看具体内容吧。

创新互联公司专注于阜宁网站建设服务及定制，我们拥有丰富的企业做网站经验。热诚为您提供阜宁营销型网站建设，阜宁网站制作、阜宁网页设计、阜宁网站官网定制、成都微信小程序服务，打造阜宁网络公司原创品牌,更为您提供阜宁网站排名全网营销落地服务。

rgb与rgba的含义

RGB 是代表Red（红色）、Green（绿色）、 Blue（蓝色）三个单词的缩写。RGBA 颜色值是 RGB 颜色值的扩展，添加了一个 alpha 通道，它规定了对象的不透明度。

1、基本语法:
R：红色值。正整数（0~255）或百分数（0.0% - 100.0%）
G：绿色值。正整数（0~255）或百分数（0.0% - 100.0%）
B：蓝色值。正整数（0~255）或百分数（0.0% - 100.0%）
A：透明度。取值0~1之间，不可为负值

RGB颜色值查找可参考：https://www.sioe.cn/yingyong/yanse-rgb-16/（css中也可用十六进制来表示各种颜色，在这个网站也可查找到各种颜色的十六进制值）。

2、浏览器的兼容性：

RGB的兼容：

CSS3中rgb与rgba的含义

RGBA的兼容：

CSS3中rgb与rgba的含义

http://caniuse.com/ 可以在这个网站查找你所要用的属性在浏览器中的兼容问题。

3、rgb与rgba的书写格式

rgb的书写格式：rgb(90,50,25);

其中第一个数字（90）表示Red 颜色（红色值），第二个数字（50）表示Green 颜色（绿色值），第三个数字（25）表示Blue 颜色（蓝色值）。数字越大（不超过255）则表示其对应的颜色加的越多。

rgba的书写格式：rgba(90,50,25,0.5);

从上面我们可以得到RGBA 颜色值是 RGB 颜色值的扩展，添加了一个 alpha 通道，它规定了对象的不透明度。前面三个数值跟 rgb表示的是一样的，a 的值为0~1之间的值，0表示透明色，1表示不透明，0.5表示每个（R、G、B）颜色50%的透明度，也就是每个颜色半透明状态。这里的a还可以简写成 .5，这里只要是有小数点的透明度，都可以这样简写。

rgb与rgba的区别

1、rgb+opacity（IE下不兼容）
因为rgba中的 a 表示对象的透明度，所以这里利用 opacity 属性（也表示透明度）+ rgb来说明一下rgb与rgba的区别。opacity 属性还可以用 filter 属性来表示，例如：filter:Alpha(opacity=50)，这里的50表示的50%的透明度。例子如下：


	rgb+opacity:
	25%

50%

75%

.box{ margin-bottom: 10px; overflow: hidden; } .box>div{ width:100px; height:100px; float: left; } .box>div{ background:rgb(255,0,0) } .box>.one{ opacity:.25; } .box>.two{ opacity:.5; } .box>.three{ opacity:.75; } .box>.four{ opacity:1 }

rgba

25% 50% 75% 100% ```css .box1>div{ width:100px; height:100px; float: left; } .box1>.one{ background:rgba(255,0,0,1); } .box1>.two{ background:rgba(255,0,0,.75); } .box1>.three{ background:rgba(255,0,0,.5); } .box1>.four{ background:rgba(255,0,0,.25); }

重庆分公司，新征程启航

CSS3中rgb与rgba的含义-创新互联

其他资讯