HTML卡片排版怎么做遮罩？蒙版添加方式-html教程-PHP中文网

图片遮罩需用linear-gradient()伪造图像层，background中渐变写在url()前并分控尺寸定位；全屏遮罩用fixed定位+vw/vh防滚动偏差；悬停遮罩优先用::before伪元素；mui遮罩需手动定位且mui.init()须DOM ready后执行。

html卡片排版怎么做遮罩？蒙版添加方式

卡片内图片加底部文字遮罩用 background 叠加

直接给加 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

适用于点击后弹出蒙版、聚焦某张卡片的场景。不能靠伪元素或子

 实现——容易被父级 overflow: hidden 裁掉，或在 flex/grid 布局里错位。正确做法是独立加一个全屏遮罩 
，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) 防止层级断裂。
hover 悬停时显示遮罩用 :before 伪元素最稳
不用 JS、不新增 DOM，适合纯 CSS 卡片悬停交互。伪元素天然附着在卡片上，响应式缩放、flex 对齐都自动继承，不会错位。

											
												
												
													DeepBI DHTML 页面生成器
													生成可在 deepbi 沙箱 iframe 内运行或作为独立文件运行的交互式 HTML 页面，使用 `window.deepbi` JS SDK 实现数据查询、空间管理、文件浏览及用户操作。当用户提出以下需求时启用该能力：

- 创建 KPI 仪表盘、数据表格、文件浏览器、成员列表、管理页面；  
- 明确要求“转成 dhtml”、“转译成 HTML”、“把 XX 页面转成……”、“控制台页面”、“管理后台”、“DeepBI 页面迁移”；  
- 提及位于 `apps/console/src/featur
												
												下载
												
											
										
结构只需卡片容器带 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。

前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索前端的入门与实战技巧！