图文详解CSS中rgba，rgb和opacity之间的区别

来源：懂视网责编：小采时间：2020-11-02 22:09:13

图文详解CSS中rgba，rgb和opacity之间的区别

图文详解CSS中rgba，rgb和opacity之间的区别:CSS中设置背景颜色的方式有很多，比如background-color，rgb，rgba等等，那你知道rgba，rgb和opacity之间的区别吗？这篇文章就给大家讲讲rgba，rgb和opacity之间的区别，有一定的参考价值，感兴趣的朋友可以参考一下。rgb和rgba的区别：rgb就是指红

推荐度：

点击下载本文 文档为doc格式

导读图文详解CSS中rgba，rgb和opacity之间的区别:CSS中设置背景颜色的方式有很多，比如background-color，rgb，rgba等等，那你知道rgba，rgb和opacity之间的区别吗？这篇文章就给大家讲讲rgba，rgb和opacity之间的区别，有一定的参考价值，感兴趣的朋友可以参考一下。rgb和rgba的区别：rgb就是指红

CSS中设置背景颜色的方式有很多，比如background-color，rgb，rgba等等，那你知道rgba，rgb和opacity之间的区别吗？这篇文章就给大家讲讲rgba，rgb和opacity之间的区别，有一定的参考价值，感兴趣的朋友可以参考一下。

rgb和rgba的区别：

rgb就是指红色（red），绿色（green）、蓝色（blue），取值在0到255之间，比如：黑色可以表示为rgb(0,0,0)

rgba是指红色（red），绿色（green）、蓝色（blue），透明度（opacity），透明度的取值在0到1 之间

rgba和rgb的区别在于，rgba可以设置背景颜色的透明度，rgb不可以

举例1：用 background: rgb(255,0,0)设置背景颜色为红色

<!DOCTYPE html>
<html>
 <head>
 <meta charset="UTF-8">
 <title></title>
 <style type="text/css">
 .a1{
 width: 300px;
 height: 200px;
 position: relative;
 border: 1px solid black;
 }
 .a2{
 width: 200px;
 height: 100px;
 position: absolute;
 top: 50px;
 left: 50px;
 background: rgb(255,0,0);
 }
 </style>
 </head>
 <body>
 <div class="a1"></div>
 <div class="a2"></div>
 </body>
</html>

效果图：

举例2：用background: rgba(255,0,0,0.5)设置背景颜色为半透明红色

 .a1{
 width: 300px;
 height: 200px;
 position: relative;
 border: 1px solid black;
 }
 .a2{
 width: 200px;
 height: 100px;
 position: absolute;
 top: 50px;
 left: 50px;
 background: rgba(255,0,0,0.5);
 }

效果图：

rgba()和opacity的区别：

两者都可以设置透明效果，但是opacity属性会作用于元素和元素里面的所有元素，比如子元素，rgba只会作用于它本身，不会作用于子元素上，具体区别请对比效果图。

举例3：用opacity: 0.5设置透明度，代码如下：

<style type="text/css">
 .a1{
 width: 300px;
 height: 200px;
 position: relative;
 border: 1px solid black;
 }
 .a2{
 width: 200px;
 height: 100px;
 position: absolute;
 top: 50px;
 left: 50px;
 background: red;
 opacity: 0.5;
 }
</style>
<body>
 <div class="a1"></div>
 <div class="a2">我是盒子里面的内容，文字不需要透明</div>
</body>

效果图：

从效果图中可以看出rgba，rgb和opacity之间的区别，rgb只可以设置背景颜色；rgba可以设置透明度，且透明度不会作用在里面的元素上，opacity可以设置透明度，但透明度会作用在里面的元素上。