最可靠方案是用::after伪元素叠加深色半透明层，需将图片包入position:relative容器，设置content:""、absolute定位及rgba或linear-gradient背景；含交互内容时应改用真实div.overlay。
用 ::after 伪元素加深色遮罩（兼容性最好）
这是目前最稳妥的方案，IE9+ 全支持，语义干净，不污染 HTML。关键不是给 <img> 加样式，而是把图片包进一个容器，再让伪元素“浮”在上面。
常见错误是忘记设 position: relative 在父容器上，导致 ::after 相对于整个页面定位；或者漏写 content: ""，伪元素压根不渲染。
-
.img-wrap必须设position: relative和display: inline-block（或block） -
.img-wrap::after要含：content: ""、position: absolute、top/left/right/bottom: 0、background: rgba(0,0,0,0.6)、transition: opacity 0.3s - hover 效果写在常态规则里，比如
.img-wrap:hover::after { opacity: 1; }，别只写 hover 状态
用 linear-gradient 做渐变深色遮罩（更自然）
如果只是简单平铺深色，容易让文字难读；用从上到下渐隐的 linear-gradient 更利于突出标题或按钮。注意 RGBA 的 alpha 值必须写小数（如 0.7），不能写 70%，否则渐变失效。
这个方案和纯色遮罩结构一致，只是把 background 换成渐变：
.img-wrap::after {
background: linear-gradient(to bottom, rgba(0,0,0,0.8), transparent);
}
- 方向推荐用
to bottom，比0deg更直观 - 如果图片是响应式（
height: auto），容器高度必须可计算，否则伪元素可能撑不开 - 不要对
<img>设z-index，它默认是auto，伪元素靠position: absolute就能盖住
需要放文字或按钮？改用真实 <div class="overlay">
<p>一旦遮罩里要塞链接、按钮或标题，就别硬塞进 <code>::after —— 伪元素不支持子节点，也无法聚焦、SEO 不友好，还容易被屏幕阅读器跳过。
这时用一个真实的 <div class="overlay"> 替代，并控制鼠标穿透行为：
<ul><li>把 <code><div class="overlay"> 放在 <code><img> 后面（同级），并设 position: absolute
pointer-events: none 到 .overlay；需要点击蒙层内容时，只给具体按钮设 pointer-events: auto
.overlay 设 opacity，改用 rgba() 背景色，防止内部文字也变淡
mask-image 不适合做深色遮罩
有人看到 mask-image 就想拿来盖颜色，但这是误解：它本质是“挖洞”，不是“盖层”。你给 mask-image: linear-gradient(black, transparent)，实际效果是让图片从黑到透明区域“显示出来”，而不是加一层深色。
而且它兼容性差：Firefox 完全不支持，Safari 需要 -webkit-mask-image，Chrome 对 alpha 处理不一致。除非你要做镂空文字或非矩形裁切，否则别碰这个。
真正容易被忽略的是：深色遮罩的目的往往是提升文字可读性，所以遮罩强度得随图调整——背景越亮，遮罩越深；背景有大片暗区时，反而要降低 rgba() 的 alpha 值，否则局部文字会发灰。
