最简写法是给图片容器设background: rgba(0,0,0,0.4)并配合position: relative需注意z-index层级、伪元素content必写、移动端加transform: translateZ(0)触发GPU渲染。图片上加半透明遮罩层的最简写法直接给图片容器加 background 叠一层 rgba() 色值比用伪元素或额外标签更轻量、更可控。不要把 opacity 加在 img 标签上——它会让图片本身也变透明文字内容跟着模糊容器必须设为 position: relative否则子元素如文字无法精准定位到图片区域rgba(0, 0, 0, 0.4) 是常用蒙层色黑底 40% 透明度足够压暗背景又不吞掉细节用伪元素 ::before 实现响应式蒙层当需要蒙层只覆盖图片可视区域比如带圆角、object-fit 缩放后的图片伪元素比纯 background 更可靠。给图片父容器设 position: relative再用 ::before 绝对定位铺满伪元素必须设 content: 否则不渲染宽高用 100%不是 inherit如果图片用了 object-fit: cover伪元素会自然跟随裁剪区域而 background 可能溢出边框.img-container { position: relative; width: 300px; height: 200px;}.img-container::before { content: ; position: absolute; top: 0; left: 0; right: 0; bottom: 0; background: rgba(0, 0, 0, 0.5);}蒙层与文字层级冲突怎么办蒙层盖住文字本质是 z-index 顺序没理清不是透明度问题。 有道翻译AI助手 有道翻译提供即时免费的中文、英语、日语、韩语、法语、德语、俄语、西班牙语、葡萄牙语、越南语、印尼语、意大利语、荷兰语、泰语全文翻译、网页翻译、文档翻译、PDF翻