遮罩文字不居中需确保父容器设 position: relative；hover闪动应搭配 transform 过渡与 pointer-events 控制；flex/Grid 下遮罩须显式设宽高；移动端需处理 z-index、pointer-events 及 hover/active/媒体查询兼容。
图片列表里遮罩文字不居中？检查父容器的定位上下文
绝对定位的遮罩层要精准居中，前提是父元素必须是 position: relative。很多人直接给 img 加 position: absolute，结果遮罩飘到页面左上角——因为没设参照物。
- 每个图片项（比如
<li>或<div class="item">）必须显式设置 <code>position: relative -
img本身不需要设定位，让它自然流式渲染；遮罩层（如<div class="overlay">）才用 <code>position: absolute - 避免在
body或全局容器上误加position: relative，否则所有子级绝对定位都会以它为基准，导致偏移 - 必须搭配
transform: translateZ(0)或will-change: opacity激活 GPU 加速 - 过渡属性写全：用
transition: opacity 0.3s ease, transform 0.3s ease，哪怕 transform 没变，也能稳住渲染管线 - 初始状态设
opacity: 0+pointer-events: none，hover 时再设opacity: 1+pointer-events: auto，防止遮罩层挡住下方图片点击 - 遮罩层必须显式设
width: 100%和height: 100%，不能只靠top/bottom/left/right: 0 - 如果父容器用了
flex: 1或minmax()，确保其实际渲染尺寸不为 0（可临时加outline: 1px solid red检查） - 图片本身建议用
width: 100%; height: 100%; object-fit: cover，避免拉伸变形干扰遮罩对齐 - 遮罩层必须有足够
z-index（比如z-index: 10），且父容器不能有overflow: hidden截断堆叠上下文 - 不要只依赖
:hover，补上:active和媒体查询@media (hover: none)下的点击态支持 - 遮罩文字内如果有链接，记得给
a标签单独设pointer-events: auto，否则继承父层的none会点不动
hover时文字闪动或延迟出现？透明度过渡别只写 opacity
只用 opacity 做 hover 过渡，容易在快速进出时触发重排或渲染抖动，尤其在 Safari 和旧版 Edge 上更明显。
多图布局下遮罩宽度撑满父容器失败？flex/Grid 容器要收束 width
当图片列表用 display: flex 或 grid 排列时，遮罩层常因未设宽高而塌陷——它默认是 width: auto，但父容器若没明确尺寸，left: 0; right: 0 就无效。
移动端点击穿透或遮罩不响应？z-index 和 pointer-events 要配对控制
在 iOS Safari 或安卓 Chrome 上，hover 效果可能失效，用户点一下才出遮罩，甚至点到背后链接——本质是伪类触发逻辑和触摸事件冲突。
stacking context 状态。
