伪元素叠加 linear-gradient() 是最稳方案，IE9+ 全支持；mask-image 兼容性差，Firefox 忽略、Safari 错解 transparent、Chrome/Edge 需前缀；需容器 relative + 伪元素 absolute 覆盖；背景图场景用多层 background；加交互内容须用真实 DOM；遮罩透明度需依图片明暗反向调整。
linear-gradient() 是最稳、最易调试的方案，不需要 JS，不依赖实验性属性，IE9+ 全支持。
为什么不用 mask-image: linear-gradient()
它看起来更“正宗”，但实际是兼容性陷阱：mask-image: linear-gradient(to bottom, black, transparent) 在 Firefox 中被完全忽略，在 Safari 中 transparent 会被转成 #000 导致全显，在 Chrome/Edge 中必须加 -webkit-mask-image 前缀才生效。你写了一行代码，却要为三套逻辑兜底。除非你要做 Alpha 裁剪（比如镂空文字），否则这不是遮罩，是自找麻烦。
::before 伪元素叠加渐变层的关键设置
核心不是给 <img> 加样式，而是把图片包进一个容器，再让伪元素“浮”在上面：
- 容器必须设
position: relative和明确尺寸（如display: inline-block或width: 100%） - 伪元素必须有
content: ""，否则不渲染 - 伪元素需设
position: absolute+top: 0; left: 0; width: 100%; height: 100% - 渐变方向推荐
to bottom（比0deg更直观），alpha 值必须用小数，如rgba(0,0,0,0.6)，不能写70% - 如果容器是响应式（
height: auto），确保其高度可计算，否则伪元素可能塌陷或错位
背景图场景下直接用 background 多层叠加
如果图片是通过 background-image 设置的（比如 banner 区域），别额外加 DOM 元素，直接复用同一元素的背景栈：
- 渐变必须写在图片前面：
background: linear-gradient(to bottom, rgba(0,0,0,0.35), rgba(0,0,0,0.35)), url('hero.jpg'); - 两层之间用英文逗号分隔，漏掉会整个声明失效
- 必须配
background-size: cover或100% 100%，否则小屏上渐变只覆盖原始图片尺寸区域 - 避免
background-attachment: fixed，iOS Safari 里它会让渐变层不随滚动更新 - 父容器高度不能是
auto，得设min-height: 100vh或具体值，否则背景无渲染空间
需要放文字或按钮？别硬塞进伪元素
::before 和 ::after 是伪元素，不支持子节点、无法聚焦、对屏幕阅读器不友好。一旦你要加链接、按钮、标题，就得换成真实 <div class="overlay">：
立即学习“前端免费学习笔记（深入）”；
- 结构变成：
<div class="img-wrap"><img><div class="overlay"><h3>标题</h3><a href="#">按钮</a></div></div> -
.overlay同样需position: absolute+top/left/right/bottom: 0覆盖 - 文字居中推荐
display: flex; justify-content: center; align-items: center - 背景用
background: rgba(0,0,0,0.6)，别用opacity，否则文字也跟着变淡
rgba(0,0,0,0.6) 在暗图上可能压过细节，在亮图上又不够衬托文字。得根据图的主色调反向微调——深色文字配浅图时，甚至该用 rgba(255,255,255,0.15)。 
