hover遮罩层没反应，90%因.image-container未设position: relative或.mask未用position: absolute定位；需确保父容器相对定位、遮罩绝对定位并覆盖全图，同时设置opacity过渡、pointer-events穿透及响应式适配。
hover 遮罩层为什么没反应？检查父容器定位和子元素层级
遮罩层不显示，90% 是因为 .image-container 没设 position: relative，或者遮罩层没用 position: absolute 正确定位。浏览器渲染时，absolute 元素会脱离文档流，但它的“参考系”必须是最近的 relative 父级——否则就飞到整个页面左上角去了。
-
.image-container必须加position: relative（哪怕它本身没偏移） - 遮罩层（比如
.mask）要设position: absolute; top: 0; left: 0; width: 100%; height: 100% - 如果图片是
<img alt="CSS项目实战之个人作品集展示_鼠标悬停时的遮罩层效果" >标签，记得给它加display: block，避免底部留白导致高度计算偏差 - 别漏掉
opacity: 0和transition: opacity 0.3s ease，否则 hover 时是“啪”一下闪出来
遮罩层内容点不中？pointer-events 设置错了
鼠标悬停能看见遮罩，但点不了底下的图片或按钮，大概率是遮罩层挡住了事件流。默认情况下，div 是会拦截点击的，即使透明。
- 在遮罩层样式里加
pointer-events: none，让鼠标“穿透”过去 - 但如果遮罩层里有可点击元素（比如删除图标、查看详情按钮），就得单独给那个子元素设
pointer-events: auto - 注意：IE11 支持
pointer-events，但旧版 Edge 有些 bug，若需兼容，可用z-index分层 +transform: translateZ(0)触发硬件加速来规避
背景图+颜色混合显示不理想？background-blend-mode 是解法
想让遮罩层既有渐变色又有纹理图，直接叠 background-color 和 background-image 容易发灰、对比度低，尤其在深色图上文字看不清。
- 改用
background: linear-gradient(rgba(0,0,0,0.6), rgba(0,0,0,0.6)), url(./mask-pattern.png)，两层叠加更可控 - 或者启用
background-blend-mode: multiply或overlay，让纹理和底色自然融合（Chrome/Firefox/Edge 均支持，Safari 15.4+ 支持） - 避免用大尺寸遮罩图（如 >200KB），否则 hover 时会有加载延迟；建议压缩到 10–20KB 内，用
background-size: cover自适应
响应式下遮罩错位？别只靠 width/height 百分比
在移动端，图片宽高比变化后，width: 100%; height: 100% 的遮罩常会拉伸变形或露白边，尤其用 object-fit: cover 的图片。
立即学习“前端免费学习笔记（深入）”；
- 把容器设为
aspect-ratio: 4/3（或你实际需要的比例），再配合overflow: hidden - 遮罩层用
inset: 0替代top/left/width/height，语义更清晰且不易出错 - 如果项目需兼容 Safari 15.3 及更早版本，用
padding-top: 75%+position: absolute模拟 aspect-ratio
