CSS项目实战之个人作品集展示_鼠标悬停时的遮罩层效果

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

遮罩效果看着简单，真正上线时最常卡在定位继承链断裂、事件穿透遗漏、以及响应式断点处的尺寸失配——这些地方没 console，也难 debug，得靠结构推演和真机预览反复对齐。