图片遮罩需用linear-gradient()伪造图像层，background中渐变写在url()前并分控尺寸定位；全屏遮罩用fixed定位+vw/vh防滚动偏差；悬停遮罩优先用::before伪元素；mui遮罩需手动定位且mui.init()须DOM ready后执行。
卡片内图片加底部文字遮罩用 background 叠加
直接给 <img alt="HTML卡片排版怎么做遮罩？蒙版添加方式" > 加 rgba() 遮罩会失效——浏览器不把 rgba() 当图像层，多背景里它被跳过。真正能生效的是用 linear-gradient() 伪造一层“图像型”遮罩，和图片同层渲染。
关键写法：background 值里渐变必须写在 url() 前面，且两层要分开控制尺寸和定位：
background: linear-gradient(to bottom, rgba(0,0,0,0) 70%, rgba(0,0,0,0.6) 100%), url('photo.jpg');-
background-size: 100% 100%, cover;（渐变铺满容器，图片等比缩放） -
background-position: top, center;（渐变锚点在顶部，图片居中）
70% 是起始渐变位置，调高可让文字区域更暗；别用 transparent 作终点，某些 Safari 会转成全黑。
卡片整体加半透明遮罩层用 fixed 定位 + z-index
适用于点击后弹出蒙版、聚焦某张卡片的场景。不能靠伪元素或子 <div> 实现——容易被父级 <code>overflow: hidden 裁掉，或在 flex/grid 布局里错位。
立即学习“前端免费学习笔记（深入）”；
正确做法是独立加一个全屏遮罩 <div class="overlay"></div>，CSS 强制脱离文档流：
-
position: fixed;（不是absolute，否则滚动时消失） -
top: 0; left: 0; width: 100vw; height: 100vh;（用vw/vh避免滚动条导致的宽度偏差） -
background: rgba(0,0,0,0.5); z-index: 1000;（值要比卡片默认z-index高）
如果卡片本身用了 transform 或 will-change，遮罩需额外加 transform: translateZ(0) 防止层级断裂。
生成可在 deepbi 沙箱 iframe 内运行或作为独立文件运行的交互式 HTML 页面，使用 `window.deepbi` JS SDK 实现数据查询、空间管理、文件浏览及用户操作。当用户提出以下需求时启用该能力： - 创建 KPI 仪表盘、数据表格、文件浏览器、成员列表、管理页面； - 明确要求“转成 dhtml”、“转译成 HTML”、“把 XX 页面转成……”、“控制台页面”、“管理后台”、“DeepBI 页面迁移”； - 提及位于 `apps/console/src/featur
hover 悬停时显示遮罩用 :before 伪元素最稳
不用 JS、不新增 DOM，适合纯 CSS 卡片悬停交互。伪元素天然附着在卡片上，响应式缩放、flex 对齐都自动继承，不会错位。
结构只需卡片容器带 position: relative，然后用 ::before 绘制遮罩：
.card { position: relative; }.card::before { content: ""; position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0,0,0,0.4); opacity: 0; transition: opacity 0.3s; }.card:hover::before { opacity: 1; }
注意：iOS/Android 上 :hover 在非可聚焦元素上只触发一次，如需稳定响应，给卡片加 tabindex="0" 并监听 :focus-within，或用 JS 监听 touchstart 切换 class。
mui.createMask() 的遮罩和卡片联动要注意回调时机
mui 框架里 mui.createMask() 创建的是全局遮罩，不是绑定到某张卡片上的。如果想让它只覆盖当前卡片，不能直接 show，得先手动计算卡片位置并设置 style：
- 用
getBoundingClientRect()获取卡片相对视口的坐标 - 给 mask 元素设
position: absolute，再赋top/left/width/height - 调用
mask.show()前，确保卡片父容器没设overflow: hidden，否则遮罩被裁 - 回调函数
callback在用户点击遮罩时触发，不是关闭时——关遮罩得自己调mask.close()
最易忽略的是：mui.init() 必须在 DOM ready 后执行，否则 createMask 返回 null，控制台报 Cannot read property 'show' of null。
