使用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; } <p>.hero::before { content: ''; position: absolute; top: 0; left: 0; right: 0; bottom: 0; background-color: rgba(0, 0, 0, 0.5); /<em> 黑色半透明 </em>/ z-index: 1; }</p><p>.hero > <em> { position: relative; z-index: 2; /</em> 确保内容在蒙版之上 */ }</p>这种方法的好处是不影响原有内容布局，蒙版独立控制，颜色和透明度灵活调整。
立即学习“前端免费学习笔记（深入）”；
使用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; } 注意：此方法对父级背景有要求，且兼容性略差，需谨慎使用。
基本上就这些。推荐优先使用伪元素方案，控制精细，兼容性好，适合大多数场景。关键点是定位、层级和透明背景色的搭配。不复杂但容易忽略细节。