css里rgba与rgb如何使用？区别在哪？
发布时间：2022-01-06 14:51:11 所属栏目：语言 来源：互联网
导读：css中rgba与rgb如何使用？对CSS熟悉的朋友应该了解CSS 中的颜色有三种定义方式：使用颜色方法（RGB、RGBA、HSL、HSLA)，十六进制颜色值和预定义的颜色名称，我们比较常用的就有rgba与rgb，本文就给大家来介绍一下css中rgba与rgb的使用及区别。 rgb与rgba的含
|
css中rgba与rgb如何使用？对CSS熟悉的朋友应该了解CSS 中的颜色有三种定义方式：使用颜色方法（RGB、RGBA、HSL、HSLA)，十六进制颜色值和预定义的颜色名称，我们比较常用的就有rgba与rgb，本文就给大家来介绍一下css中rgba与rgb的使用及区别。 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的兼容： 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%的透明度。例子如下： <div class="box"> <p>rgb+opacity:</p> <div class='one'>25%</div> <div class='two'>50%</div> <div class='three'>75%</div> <div class='four'>100%</div> </div> .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 } 从上面的例子中我们可以看出随着透明度的变化，div 会具有透明性，div 上的文本也会随之具有透明度，越来越看不清。 2、rgba 因为rgba中的 a 表示对象的透明度，所以这里可以直接利用background搭配rgba来说明透明这个问题。例子如下： <div class="box1"> <p>rgba</p> <div class='one'>25%</div> <div class='two'>50%</div> <div class='three'>75%</div> <div class='four'>100%</div> </div>  （编辑：晋中站长网） 【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容! |
