RGBA 与 Opacity 透明度对比
rgba() 和 opacity 设置透明度的区别及使用场景
问题
rgba() 和 opacity 都能实现透明效果，它们有什么不同？
解答
opacity
opacity 作用于整个元素，包括所有子元素和内容。
.box {
opacity: 0.5; /* 整个元素及子元素都变半透明 */
}rgba()
rgba() 只作用于设置的那个颜色属性，不影响子元素。
.box {
background-color: rgba(0, 0, 0, 0.5); /* 只有背景半透明 */
}对比示例
<!DOCTYPE html>
<html>
<head>
<style>
.container {
display: flex;
gap: 40px;
padding: 20px;
}
/* 使用 opacity */
.opacity-box {
width: 200px;
height: 150px;
background-color: blue;
opacity: 0.5; /* 整个元素变透明，包括文字 */
}
/* 使用 rgba */
.rgba-box {
width: 200px;
height: 150px;
background-color: rgba(0, 0, 255, 0.5); /* 只有背景透明 */
}
.text {
color: white;
font-size: 18px;
padding: 20px;
}
</style>
</head>
<body>
<div class="container">
<div class="opacity-box">
<p class="text">opacity: 文字也变透明了</p>
</div>
<div class="rgba-box">
<p class="text">rgba: 文字保持不透明</p>
</div>
</div>
</body>
</html>子元素无法覆盖 opacity
.parent {
opacity: 0.5;
}
.child {
opacity: 1; /* 无效，子元素最终透明度 = 0.5 * 1 = 0.5 */
}常见使用场景
/* 场景1：半透明遮罩层，文字清晰 */
.overlay {
background-color: rgba(0, 0, 0, 0.7);
}
/* 场景2：hover 时整体变淡 */
.card:hover {
opacity: 0.8;
}
/* 场景3：半透明边框 */
.box {
border: 2px solid rgba(255, 255, 255, 0.3);
}关键点
opacity影响整个元素及所有子元素，子元素无法单独恢复不透明rgba()只影响设置的颜色属性，不影响子元素- 需要半透明背景但内容清晰时，用
rgba() - 需要整体淡入淡出效果时，用
opacity opacity可配合transition做动画，rgba()需要用background-color过渡
目录