图片hover渐变遮罩失效主因是父容器未设position: relative导致::before定位错乱；需设absolute+inset: 0、合理z-index、图片宽高自适应、viewport声明、GPU加速及兼容写法。
hover时用::before加渐变遮罩，但图片没反应？
常见原因是父容器没设position: relative，导致::before脱离文档流后定位错乱。伪元素默认是position: static，必须配合absolute和明确的top/left/right/bottom才压得准。
实操建议：
立即学习“前端免费学习笔记（深入）”；
- 图片外层
<div>必须加position: relative -
::before设position: absolute+inset: 0（比top:0;left:0;right:0;bottom:0更简洁） - 确保
z-index层级：遮罩z-index: 1，文字z-index: 2，图片本身不设z-index - 渐变背景用
background: linear-gradient(0deg, rgba(0,0,0,0.7), transparent)，角度写0deg才从下往上渐变
响应式下遮罩错位或尺寸异常？
问题出在width/height没随图片缩放同步更新。如果图片用max-width: 100%但父容器没设宽高，::before会按父容器原始尺寸渲染，而非图片当前显示尺寸。
实操建议：
立即学习“前端免费学习笔记（深入）”；
- 图片设
display: block; width: 100%; height: auto;，避免内联元素默认baseline留白 - 父容器不要依赖
height: 100%，改用aspect-ratio（现代浏览器）或padding-top技巧保比例 - 遮罩
::before不用设width/height，靠inset: 0自动贴合 - 移动端测试时，检查
viewport是否漏设：<meta name="viewport" content="width=device-width, initial-scale=1">
hover动画卡顿或闪一下才生效？
本质是浏览器没对伪元素做合成层提升，导致每次hover都触发重排+重绘。尤其在滚动或缩放时更明显。
实操建议：
立即学习“前端免费学习笔记（深入）”；
- 给
::before加will-change: transform（仅hover前触发）或transform: translateZ(0)（强制GPU加速） - 动画用
opacity和transform，别用background或top/left——后者会频繁重排 - 过渡写全：
transition: opacity 0.3s ease, transform 0.3s ease，避免只写transition: all引发意外属性动画 - 如果标题文字也动，确保文字容器
position: relative且z-index高于遮罩
IE11或旧版Safari里遮罩不显示？
::before在IE11支持，但inset不支持，aspect-ratio全不支持，linear-gradient需加-webkit-前缀，且透明度写法要兼容。
实操建议：
立即学习“前端免费学习笔记（深入）”；
- 替换
inset: 0为top: 0; left: 0; right: 0; bottom: 0 - 渐变写两遍：
background: -webkit-linear-gradient(top, rgba(0,0,0,0.7), transparent)和background: linear-gradient(0deg, rgba(0,0,0,0.7), transparent) - 避免用
rgba()直接写在background里，IE11对rgba在渐变中支持不稳定，可改用hsla()或十六进制+opacity分离 - 旧Safari（will-change，用
transform: translateZ(0)更稳妥
最常被忽略的是图片父容器的position和伪元素的z-index层级关系——这两处一错，整个遮罩就“看不见”，但控制台里元素明明存在。调的时候先关掉所有动画，纯静态看定位，再加交互。
