纯CSS实现图片底部半透明遮罩的正确方法是：外层容器设position: relative，用::after伪元素绝对定位到底部区域，设置content: ""、background-color: rgba(0,0,0,0.6)、height: 30px及transform: translateZ(0)启用GPU加速，文字与图片同级并设z-index: 2确保显示在遮罩上方。
直接用 rgba() 配合绝对定位就能实现图片底部的半透明遮罩，不需要 JS，也不用改图片本身的 opacity —— 后者会连带文字一起变淡，完全违背设计意图。
为什么不能给 <img> 直接设 opacity
常见错误是写 .my-img { opacity: 0.4; }，这会让整个 <img> 元素（包括它上面的文字、按钮等子内容）都变透明。遮罩本意是「只压暗图片局部区域，不干扰交互层」。更麻烦的是，<img> 默认是内联元素，没设 display: block 时，hover 或定位可能根本不起效。
底部遮罩必须用容器 + ::after 伪元素
核心结构是：外层 div 设 position: relative，图片正常流式放置，再用 ::after 绝对定位覆盖并只拉到底部区域。关键点：
- 伪元素必须写
content: ""，否则不渲染 - 用
bottom: 0+height控制遮罩高度（比如height: 30px），而不是靠top和height算偏移 -
background-color: rgba(0, 0, 0, 0.6)中的0.6是透明度，建议控制在0.3–0.8之间，太低压不住图，太高吞掉文字细节 - 如果图片用了
object-fit: cover，伪元素会自然贴合可视区域；但纯background叠加容易溢出边框
移动端要注意 transform: translateZ(0) 触发 GPU 渲染
某些安卓 WebView 或旧版 Safari 在伪元素上做过渡动画时会出现闪烁或卡顿。加一行 transform: translateZ(0) 能强制启用硬件加速：
立即学习“前端免费学习笔记（深入）”；
.img-container::after {
content: "";
position: absolute;
left: 0;
bottom: 0;
width: 100%;
height: 30px;
background-color: rgba(0, 0, 0, 0.6);
transform: translateZ(0);
}
这个技巧不增加 DOM 节点，也不影响布局，但漏掉就可能在低端机上看到跳帧。
遮罩和文字层级冲突怎么解
遮罩盖住文字，不是透明度问题，而是 z-index 没理清。默认伪元素就在图片上方，但如果你把文字放在图片内部（比如 <img> 里塞 <span>），那是无效的——<img> 不支持子元素。正确做法是：
- 文字和图片同级，都放在容器内
- 文字层显式设
position: relative和z-index: 2 - 遮罩伪元素保持默认层级（
z-index: 1）或不写，避免意外覆盖 - 别给伪元素设
pointer-events: none—— 底部遮罩常要响应点击，比如“查看详情”按钮就在遮罩区
圆角遮罩还要额外加 border-radius 和 overflow: hidden 到容器，否则伪元素边缘会露出来——这点很容易被忽略，尤其当遮罩只占底部一截时，顶部圆角会断层。
