最可靠方案是用::after伪元素配合position: relative容器，无需JS且IE9+全支持；因img是替换元素，background无效、opacity会误伤整体，遮罩须为独立层且不干扰交互。
直接用 ::after 伪元素 + position: relative 容器是最可靠方案，不需要 JS，IE9+ 全支持，且能随图片缩放自动适配。
为什么不能直接给 <img alt="HTML图片自适应遮罩怎么加？蒙版效果添加方法" > 加遮罩
常见错误是写 .my-img { background: rgba(0,0,0,0.5); } 或 opacity: 0.7 —— 前者对 <img alt="HTML图片自适应遮罩怎么加？蒙版效果添加方法" > 无效（background 不覆盖替换内容），后者会让整个图片和其上文字一起变淡。遮罩必须是“叠在上面”的独立层，且只影响视觉，不干扰交互或语义。
-
<img alt="HTML图片自适应遮罩怎么加？蒙版效果添加方法" >是替换元素，background属性对其无渲染效果 -
opacity会穿透到所有子内容（但<img alt="HTML图片自适应遮罩怎么加？蒙版效果添加方法" >本身不支持子节点，所以实际只是把图变灰） - 响应式图片常设
height: auto，容器高度不可预测，伪元素若没正确锚定会塌陷或错位
::after 伪元素实现自适应遮罩的关键设置
核心不是修饰图片，而是控制容器与伪元素的定位关系。只要容器尺寸可计算，伪元素就能 100% 贴合。
- 外层
<div class="img-wrap"> 必须设 <code>position: relative和display: inline-block（或block），否则::after会相对 body 定位 -
::after必须含content: ""，否则不渲染；必须设position: absolute+top: 0; left: 0; right: 0; bottom: 0 - 用
background: linear-gradient(to bottom, rgba(0,0,0,0.6), transparent)替代纯色，更利于文字可读；alpha 值必须用小数（如0.6），不能写60% - 如果图片用
object-fit: cover，伪元素会自然贴合可视区域；但若容器height为auto，需确保父级有明确宽高约束（比如max-width: 100%） - 渐变必须写在
url()前面：background: linear-gradient(to bottom, rgba(0,0,0,0.4), rgba(0,0,0,0)), url('photo.jpg'); -
background-size必须分写：background-size: 100% 100%, cover;（前者让渐变铺满容器，后者让图片等比缩放） -
background-position也要分写：background-position: top, center;，避免渐变被图片裁剪偏移 - 禁用
background-attachment: fixed，iOS Safari 中它会导致渐变层不随滚动更新 - 文字层需显式设
position: relative和更高z-index（如3），否则会被蒙层盖住 - 如需点击图片，给蒙层加
pointer-events: none；如需点击蒙层内按钮，则只对按钮设pointer-events: auto - 避免给蒙层设
opacity，改用background: rgba()，防止内部文字也变淡
背景图场景下用多层 background 更轻量
当图片是通过 background-image 设置的（如 banner、卡片封面），不用额外 DOM，直接复用同一元素的背景栈即可，但顺序和尺寸必须拆开控制。
生成可在 deepbi 沙箱 iframe 内运行或作为独立文件运行的交互式 HTML 页面，使用 `window.deepbi` JS SDK 实现数据查询、空间管理、文件浏览及用户操作。当用户提出以下需求时启用该能力： - 创建 KPI 仪表盘、数据表格、文件浏览器、成员列表、管理页面； - 明确要求“转成 dhtml”、“转译成 HTML”、“把 XX 页面转成……”、“控制台页面”、“管理后台”、“DeepBI 页面迁移”； - 提及位于 `apps/console/src/featur
立即学习“前端免费学习笔记（深入）”；
加文字或按钮时必须换真实 <div> 蒙层
<p>伪元素不支持子节点、无法聚焦、SEO 不友好，一旦需要放标题、链接或按钮，就得用真实 DOM 替代。</p>
<ul><li>把 <code><div class="overlay"> 放在 <code><img alt="HTML图片自适应遮罩怎么加？蒙版效果添加方法" > 同级后方，设 position: absolute 和 z-index: 2
最易忽略的是容器高度是否真正可计算——很多“遮罩没显示”问题，根源在于 img-wrap 高度塌陷，导致 ::after 没地方渲染。检查是否漏了 display: block 或父级未设宽高约束。
