直接用 background 叠加 linear-gradient 与图片实现遮罩最轻量可控；遮罩层须写在图片层前，配合 cover 尺寸、明确高度及合理透明度确保跨设备稳定。
用 linear-gradient 叠加在 background-image 上实现遮罩
HTML 元素本身不支持“背景图+独立遮罩层”这种分层逻辑，但 CSS 的 background 属性允许叠加多个背景层，其中渐变可作为最上层的半透明遮罩。关键不是加新元素，而是复用同一元素的背景栈。
常见错误是试图用伪元素或额外 <div> 做遮罩，结果导致层级混乱、响应式错位或 z-index 冲突。直接在目标元素上写多层背景更轻量、更可控。
-
background值从左到右绘制，越靠右的层越靠近底层（即：先写的在上面） - 遮罩层必须写在图片层前面，例如：
background: linear-gradient(rgba(0,0,0,0.4), rgba(0,0,0,0.4)), url(...) - 两个背景层之间用逗号分隔，不能漏掉逗号，否则整个声明失效
- 渐变方向建议用角度（如
to bottom）而非关键词（top），后者在部分旧浏览器中行为不一致
遮罩透明度与文字可读性怎么平衡
遮罩不是越黑越好，重点是让文字在任意背景图亮度下都清晰。纯黑 rgba(0,0,0,0.6) 在暗图上反而会吞掉细节；纯白 rgba(255,255,255,0.2) 在亮图上可能无效。实际应根据图的主色调反向微调。
推荐做法是先用开发者工具实时拖动透明度值，观察文字对比度变化。WebAIM 标准要求文本与背景对比度 ≥ 4.5:1，可用浏览器插件（如 axe DevTools）快速验证。
立即学习“前端免费学习笔记（深入）”；
- 深色文字配浅图 → 用浅色渐变（如
rgba(255,255,255,0.15)）提升文字灰度 - 浅色文字配深图 → 用深色渐变（如
rgba(0,0,0,0.35)）压暗背景局部 - 避免用
hsla()或hex写渐变起止色，RGBA 更直观控制透明度
响应式背景图遮罩失效的三个典型原因
背景图在移动端缩放、裁剪后，遮罩常出现错位、断裂或完全消失——这不是渐变写错了，而是背景尺寸/定位没同步适配。
background:
linear-gradient(to bottom, rgba(0,0,0,0.35), rgba(0,0,0,0.35)),
url('hero.jpg');
background-size: cover;
background-position: center;
background-repeat: no-repeat;
以上代码在桌面端正常，但在小屏上可能因图片被 cover 裁剪而让渐变只覆盖原图区域，视觉上像“没生效”。真正要 fix 的是这三处：
-
background-size必须设为cover或100% 100%，不能留默认的auto -
background-attachment避免用fixed，它在 iOS Safari 中会导致渐变层不随滚动更新 - 如果父容器高度为
auto，需确保子元素有明确高度（如min-height: 100vh），否则背景无渲染空间
用伪元素做遮罩的适用场景和风险
当需要动态控制遮罩（比如 hover 时淡入、JS 切换遮罩色），或背景图来自内联样式（无法直接改 CSS），才考虑用 ::before。但它本质是新增 DOM 节点，会引入新变量。
风险点比想象中多：伪元素默认不占文档流，但一旦设了 position: absolute，就必须精确控制 top/left/right/bottom 和 z-index；若父元素没设 position: relative，伪元素会相对于最近定位祖先定位，极易跑偏。
- 必须给父元素加
position: relative - 伪元素需设
content: ''、position: absolute、inset: 0（或top:0; left:0; width:100%; height:100%） - 渐变写在伪元素的
background里，主图留在父元素background，二者分离管理 - 动画遮罩时，优先用
opacity过渡，避免对background本身做 transition（性能差且不兼容）
background-size 缺失或父容器高度塌陷上。 
