使用RGBA可实现背景透明而文字清晰的效果，.overlay-text { background-color: rgba(0, 0, 0, 0.7); color: white; } 结合定位创建覆盖层，避免opacity导致子元素透明的问题。
在CSS中，通过结合 opacity 和背景颜色，可以实现透明层效果。这种效果常用于模态框遮罩、图片文字覆盖层等场景。关键在于控制元素的整体透明度或仅背景的透明度，以避免影响子元素。
使用 opacity 控制整体透明度
设置 opacity 属性会让整个元素（包括内容和背景）都变得透明。取值范围为 0（完全透明）到 1（完全不透明）。
例如：
.overlay {
background-color: #000;
opacity: 0.5;
width: 100%;
height: 100%;
}
这个黑色背景层会半透明，但若内部有文字或按钮，它们也会变透明，可能影响可读性。
仅让背景透明而不影响内容
如果只想让背景颜色透明而保持文字清晰，推荐使用 RGBA 颜色值代替 opacity。
立即学习“前端免费学习笔记（深入）”；
示例：- rgba(0, 0, 0, 0.5) 表示黑色，50% 透明度
- rgba(255, 255, 255, 0.8) 表示白色，20% 透明度
.text-overlay {
background-color: rgba(0, 0, 0, 0.6);
color: white;
padding: 20px;
}
此时背景半透明，但文字依然清晰可见，不会受透明度影响。
结合定位创建覆盖层
常见做法是将透明层定位在其他内容之上，形成视觉遮罩。
结构示例：
@@##@@
CSS 设置：
.container {
position: relative;
}
.overlay-text {
position: absolute;
top: 20px;
left: 20px;
background-color: rgba(0, 0, 0, 0.7);
color: white;
padding: 10px 15px;
}
这样既实现了背景透明层，又保证了文字清晰显示。
基本上就这些。用 opacity 要注意影响整体，而用 rgba 可精准控制背景透明度，更适用于大多数设计需求。
