这是我参与「4月日新计划更文活动」的第12天。
我们今天讲一下opacity和rgba的区别。
先来看一下两个属性的区别。
前端opacity和rgba都可以实现元素透明度的效果，但是它们的功能不完全一样。
opacity属性可以控制元素及其内容的透明度，取值范围为0~1，0表示完全透明，1表示完全不透明。
它可以应用于文本、背景、图片等元素，通过改变透明度来实现各种效果，如淡入淡出、半透明遮罩、水印等。
需要注意的是，opacity属性会影响元素及其内容的透明度，如果只想改变元素的背景透明度而保持文本不透明，可以使用rgba颜色值来设置背景颜色。
而rgba是一种颜色表示方式，它可以使用红、绿、蓝三个通道的数值和一个透明度数值来表示颜色。
其中，透明度数值范围为0~1，0表示完全透明，1表示完全不透明。
rgba可以用于设置元素的背景颜色、文本颜色等，通过改变透明度来实现透明效果。但是它仅仅是一种颜色表示方式，它不能像opacity属性一样直接控制元素的透明度，因此如果要改变元素及其内容的透明度，仍然需要使用opacity属性。
好，基础信息已经清楚，我写两个例子来看一下。
opacity
页面展示：
代码展示
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>双飞翼布局</title>
</head>
<style>
.container {
width: 100px;
height: 500px;
background-color: red;
color: blue;
opacity: 0.3;
}
</style>
<body>
<div class="container">container</div>
</body>
</html>
rgba
页面展示：
代码展示：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>双飞翼布局</title>
</head>
<style>
.container {
width: 100px;
height: 500px;
background-color: rgba(0,0,0, 0.3);
color: blue;
}
</style>
<body>
<div class="container">container</div>
</body>
</html>
从上面两个例子可以看出来：
使用了opacity之后，背景颜色和字体颜色也会跟着产生透明度，同时会影响后代元素。
而使用rgba只会影响当前设置的属性，不会对其他元素和后代产生影响。
以上就是我今天学习的opacity和rgba知识点。
看到掘金上的好文章，如果对你有帮助，顺手点个赞，或者把文章收藏。不用担心找不到了，以后也能经常收到类似好回答，我会持续进行更新。
