最稳妥的做法是用相对定位的容器配合::after伪元素实现遮罩层，需设position: relative、content: ""、宽高100%及rgba背景色，并通过z-index明确层级关系。
用 CSS 的 position 和 ::after 实现遮罩层
直接在图片外层套一个容器，用相对定位 + 伪元素叠加黑色半透明层是最稳妥的做法。关键不是给 <img> 加样式，而是控制它的父容器。
- 必须给容器设
position: relative，否则::after会脱离上下文乱飘 -
::after要设content: ""，否则不渲染；宽高需设为100%才能铺满 - 遮罩颜色用
rgba(0,0,0,0.6)比opacity更安全——后者会让里面文字也变透明 - 如果容器没固定尺寸，
<img>又是响应式的（比如width: 100%），遮罩会自动跟随缩放
<div class="img-container">
<img src="photo.jpg" alt="示例图">
</div>
<p><style>
.img-container {
position: relative;
display: inline-block; /<em> 防止撑满父宽 </em>/
}
.img-container::after {
content: "";
position: absolute;
top: 0; left: 0; right: 0; bottom: 0;
background: rgba(0, 0, 0, 0.6);
pointer-events: none; /<em> 确保点击穿透到图片 </em>/
}
</style>遮罩只出现在图片下方，不是整个图片上
如果你要的“下方”是指图片底部边缘有一条横向黑条（类似标题栏），那就不是全遮罩，而是用 linear-gradient 做渐变遮罩，或者单独加一层 <div> 放在图片下面。
- 用
background-image: linear-gradient(to top, rgba(0,0,0,0.8), transparent)叠在图片上，方向朝上才能盖住底部 - 如果用额外 DOM 元素，记得设
margin-top: -20px之类负边距让它“爬”上来贴住图片底边 - 注意：纯 CSS 方案里，
background只能叠加在图片自身上，不能独立于图片存在——所以“下方”这个需求本质是视觉错觉，实际还是图片区域内的处理
图片带文字时，遮罩和文字层级容易错乱
常见错误是文字被遮罩盖住，或文字跟着遮罩一起变暗。解决核心就一条：z-index 分层要明确。
- 遮罩层（
::after）设z-index: 1 - 文字元素必须比遮罩层级高，比如设
z-index: 2，且其父容器也要有position（哪怕只是relative） - 别把文字塞进
<img>标签里——<img>是自闭合标签，无法嵌套内容 - 推荐结构：
<div class="img-wrapper"><img><div class="caption">文字</div></div>
移动端适配和性能要注意什么
遮罩本身开销极小，但组合使用时容易触发重排或模糊渲染。
立即学习“前端免费学习笔记（深入）”；
- 避免对
::after做transform动画——iOS Safari 有时会渲染出锯齿 - 如果页面大量使用，建议把遮罩样式抽成 CSS 类（如
.overlay-black-60），别重复写rgba(0,0,0,0.6) - 不要用
filter: brightness()模拟遮罩——它会影响整个元素，包括子文字，且性能较差 - 检查是否启用了
will-change: opacity，这种优化在简单遮罩场景下反而增加开销
遮罩看似简单，但真正上线时最容易翻车的是层级关系和响应式缩放后的尺寸错位——尤其当图片用 object-fit: cover 或父容器设了 overflow: hidden 时，遮罩可能被裁掉一部分。动手前先用浏览器开发者工具勾选「显示层叠上下文」，确认各元素的渲染顺序。
