使用CSS伪元素可轻松实现背景图片上的半透明蒙版效果，提升文字可读性。1. 通过::before伪元素设置绝对定位与rgba颜色覆盖背景，配合z-index确保内容层级在上；2. 利用多背景语法结合线性渐变模拟蒙版，无需额外结构；3. 进阶可用mix-blend-mode实现混合模式蒙版，但需注意兼容性。推荐优先采用伪元素方案，控制灵活且兼容性佳。
在网页设计中，为了让背景图片上的文字更清晰可读，通常会在图片上叠加一层半透明颜色，也就是常说的“蒙版”效果。实现这个效果并不需要修改图片本身，仅用CSS就能轻松完成。
使用伪元素创建半透明蒙版
这是最常用且结构干净的方法。通过给背景容器添加一个::before伪元素，并设置其背景色和透明度，来实现叠加效果。
示例代码：
.hero {
position: relative;
background-image: url('your-image.jpg');
background-size: cover;
background-position: center;
height: 400px;
}
.hero::before {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background-color: rgba(0, 0, 0, 0.5); / 黑色半透明 /
z-index: 1;
}
.hero > {
position: relative;
z-index: 2; / 确保内容在蒙版之上 */
}
这种方法的好处是不影响原有内容布局，蒙版独立控制，颜色和透明度灵活调整。
立即学习“前端免费学习笔记（深入）”；
使用background-layer叠加颜色
CSS支持多层背景，可以通过background属性同时设置颜色和图片，利用线性渐变模拟蒙版。
示例代码：
.hero {
background:
linear-gradient(rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5)),
url('your-image.jpg');
background-size: cover;
background-position: center;
height: 400px;
}
这种方式无需额外标签或伪元素，简洁高效。适合静态蒙版颜色，尤其是纯色叠加。
使用box-shadow或mix-blend-mode（进阶技巧）
虽然不常用，但mix-blend-mode可以让元素与背景产生混合效果，结合纯色层也能实现艺术化蒙版。
例如：
.overlay {
background: rgba(0, 0, 0, 0.6);
mix-blend-mode: multiply;
}
注意：此方法对父级背景有要求，且兼容性略差，需谨慎使用。
基本上就这些。推荐优先使用伪元素方案，控制精细，兼容性好，适合大多数场景。关键点是定位、层级和透明背景色的搭配。不复杂但容易忽略细节。
