归纳一下核心要点：采用伪元素配合linear-gradient()是实现图片渐变遮罩最稳妥的方案，兼容性覆盖 IE9 及以上版本；而mask-image的浏览器兼容性存在明显短板，Firefox 不予支持，Safari 对transparent的解析有误，Chrome 与 Edge 仍需附加前缀；实际开发时需确保容器设置为 relative 定位，伪元素以 absolute 方式铺满覆盖；若图片以背景图形式加载，直接使用多层background即可完成遮罩效果；若需加入交互元素，则必须使用真实 DOM 节点；遮罩透明度的取值应依据图片的明暗特性反向调节。
直接借助伪元素叠加 linear-gradient()，是当前最稳定且易于调试的图片遮罩实现方式，无需引入 JavaScript，也不依赖那些尚处于实验阶段的 CSS 属性，IE9 及后续版本均可流畅运行。接下来逐一展开说明。
为何不推荐使用 mask-image: linear-gradient()
初次接触时，mask-image 似乎更为“正统”，但表象之下隐藏着严重的兼容性隐患。mask-image: linear-gradient(to bottom, black, transparent) 在 Firefox 中会被直接忽略；在 Safari 里，transparent 会被错误解析为 #000，导致整张图片完全显露；Chrome 与 Edge 则强制要求添加 -webkit-mask-image 前缀才能生效。原本只需一行代码，却要为三种浏览器的不同逻辑分别做兼容处理。除非确实需要 Alpha 裁剪（例如镂空文字效果），否则这类方案不是便捷的遮罩方式，而是平添复杂度。
::before 伪元素叠加渐变层的核心配置
实现的关键并非直接给
- 容器必须设置
position: relative，并具备明确的尺寸（例如display: inline-block或指定宽高），否则伪元素将缺少参照基准。 - 伪元素需要定义
content: ""，否则浏览器不会对其进行渲染。 - 伪元素应设定
position: absolute并配合top: 0; left: 0; width: 100%; height: 100%，方可实现完整覆盖容器。 - 渐变方向建议使用
to bottom，相比0deg更直观易读。注意透明度值必须采用小数形式，例如rgba(0,0,0,0.6)，使用70%这类写法属于无效值。 - 若容器采用响应式布局（
height: auto），需确保其高度能被正确计算，否则伪元素可能出现塌陷或位置偏移。
背景图场景下直接通过 background 多层叠加
当图片通过 background-image 加载时（例如横幅区域），无需额外添加 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 属于伪元素，无法容纳子节点、不可聚焦，对屏幕阅读器也不够友好。一旦需要添加链接、按钮或标题，必须改用真实 DOM 结构：
- 推荐结构为：
标题
按钮 .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) 来达到更理想的视觉效果。
