使用rgba()或伪元素实现背景透明叠加，避免opacity影响子元素。如：.box{background-color:rgba(0,0,0,0.5);}保留文字清晰；复杂场景用.hero::before伪元素叠加半透明层；多背景可结合渐变、图片与blend-mode增强层次。
要实现背景透明并叠加颜色效果，关键在于合理使用 CSS 的透明属性与背景层叠。核心方法是利用 rgba() 颜色值或 opacity，配合多层背景或伪元素来达到视觉叠加效果。
使用 rgba() 设置半透明背景
最常用且推荐的方式是使用 rgba() 定义背景色，其中第四个参数为透明度（0 到 1）。
例如：给一个 div 添加半透明黑色背景，文字保持清晰：
.box {
background-color: rgba(0, 0, 0, 0.5); /* 黑色，50% 透明度 */
color: white;
padding: 20px;
}
这种方式只影响背景，不会让子元素变透明。
立即学习“前端免费学习笔记（深入）”；
用伪元素实现背景透明叠加
当需要在图片或其他复杂背景上叠加一层透明颜色时，可使用 ::before 或 ::after 伪元素。
典型场景：- 在背景图上加一层深色蒙版，使文字更易读
- 叠加渐变与纯色组合效果
.hero {
position: relative;
background-image: url('bg.jpg');
background-size: cover;
color: white;
padding: 100px;
}
<p>.hero::before {
content: '';
position: absolute;
top: 0; left: 0; right: 0; bottom: 0;
background-color: rgba(0, 0, 255, 0.3); /<em> 蓝色叠加 </em>/
z-index: -1;
}
这样图片保持完整，上方叠加了半透明蓝色层。
避免使用 opacity 的副作用
虽然设置 opacity: 0.5; 可以让整个元素透明，但它会影响所有子元素，包括文字和边框。
不推荐写法：.bad-example {
background-color: black;
opacity: 0.5; /* 文字也会变透明，可读性差 */
}
除非你确实需要整体透明，否则优先选择 rgba() 或伪元素方案。
多背景叠加（高级用法）
CSS 支持多个背景图层，可以同时使用颜色、渐变和图片进行叠加。
.multi-bg {
background:
linear-gradient(rgba(255, 0, 0, 0.4), rgba(0, 255, 0, 0.4)),
url('texture.png'),
#000;
background-blend-mode: overlay;
}
这个例子中，颜色渐变覆盖在纹理图之上，再与基础色混合，创造出丰富的视觉层次。
基本上就这些。关键是根据需求选择合适的方法：简单透明用 rgba，复杂叠加用伪元素或多背景，避免滥用 opacity 影响内容显示。
