CSS中rgba，rgb和opacity间的区别是什么

这篇文章主要介绍“CSS中rgba，rgb和opacity间的区别是什么”，在日常操作中，相信很多人在CSS中rgba，rgb和opacity间的区别是什么问题上存在疑惑，小编查阅了各式资料，整理出简单好用的操作方法，希望对大家解答”CSS中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)设置背景颜色为红色
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27

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

效果图：
举例2：用background: rgba(255,0,0,0.5)设置背景颜色为半透明红色
1
2
3
4
5
6
7
8
9
10
11
12
13
14
.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设置透明度，代码如下：
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21

.a1{
width: 300px;
height: 200px;
position: relative;
border: 1px solid black;
}
.a2{
width: 200px;
height: 100px;
position: absolute;
top: 50px;
left: 50px;
background: red;
opaci免费云主机、域名ty: 0.5;
}

效果图：

从效果图中可以看出rgba，rgb和opacity之间的区别，rgb只可以设置背景颜色；rgba可以设置透明度，且透明度不会作用在里面的元素上，opacity可以设置透明度，但透明度会作用在里面的元素上。到此，关于“CSS中rgba，rgb和opacity间的区别是什么”的学习就结束了，希望能够解决大家的疑惑。理论与实践的搭配能更好的帮助大家学习，快去试试吧！若想继续学习更多相关知识，请继续关注云技术网站，小编会继续努力为大家带来更多实用的文章！

相关推荐: 怎么用纯css3实现图片点击弹出动画遮罩层效果

本文小编为大家详细介绍“怎么用纯css3实现图片点击弹出动画遮罩层效果”，内容详细，步骤清晰，细节处理妥当，希望这篇“怎么用纯css3实现图片点击弹出动画遮罩层效果”文章能帮助大家解决疑惑，下面跟着小编的思路慢慢深入，一起来学习新知识吧。 　　这是一款非常实用…