您现在的位置是：网站首页> 编程资料编程资料

CSS3 rgb and rgba（透明色）的使用详解CSS3颜色值RGBA与渐变色使用介绍CSS3解决移动页面上点击链接触发色块的问题 CSS3中使用RGBa来调节透明度的教程CSS3中使用RGBA设置透明度的示例CSS3 透明色 RGBA使用介绍

2021-09-03 1116人已围观

简介这篇文章主要介绍了CSS3 rgb and rgba（透明色）的使用详解，本文给大家介绍的非常详细，对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下

对于颜色相信大家都很敏感，眼睛所见之处都存在颜色，那在css中我们用什么来表示颜色呢？CSS 中的颜色有三种定义方式：使用颜色方法（RGB、RGBA、HSL、HSLA)，十六进制颜色值和预定义的颜色名称。我们常使用的是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的兼容：

在这里插入图片描述

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%
100%

 .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来说明透明这个问题。例子如下：

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); }

在这里插入图片描述

从上面的例子中我们可以看出随着透明度的变化，div 会具有透明性，div 上的文本并没有受到透明度的影响，保持着文本的自身颜色。

RGBA 不单可以应用在 background 上，我们还可以应用在只要设置了颜色的地方都可以使用，在这里简单的说一下几种：

第一种：字体颜色，设置颜色的同时可以设置透明度。

字体颜色

 .p1{ color:rgb(255,0,0) } .p2{ color:rgba(255,0,0,.5) }

在这里插入图片描述

第二种：边框色border-color

 .div3,.div4{ width:100px; height:100px; background:#f00; } .div3{ border:5px solid rgb(0,0,0) } .div4{ border:5px solid rgba(0,0,0,.2) }

在这里插入图片描述

第三种：字体的阴影色text-shadow

字体阴影颜色

 .p1{ text-shadow:1px 2px 1px rgb(255,0,0) ; } .p2{ text-shadow:1px 2px 1px rgba(255,0,0,.5) ; }

在这里插入图片描述

第四种：改变边框阴影色

 .div3,.div4{ width:100px; height:100px; background:#000; } .div3{ box-shadow: 1px 5px 5px rgb(255,0,0); margin-bottom: 20px; } .div4{ box-shadow: 1px 5px 5px rgba(255,0,0,.5) ; }

在这里插入图片描述