图片悬停蒙层必须用容器元素的::after伪元素而非img标签自身，因img是替换元素不支持伪元素；正确结构为包裹容器设position: relative，再对容器使用::after并配齐content、position、top/left/width/height、background-color、z-index等必要样式。
图片悬停蒙层的基本结构为什么必须用 ::after 而不是子元素？
直接在 <img> 上加 ::after 是无效的，因为 <img> 是替换元素，不支持伪元素。必须把图片包进一个容器（如 <div> 或 <figure>），再对容器使用 ::after 才能生效。
常见错误是写成：img:hover::after —— 这段 CSS 根本不会触发，浏览器直接忽略。
正确做法是：
- 用
<div class="img-wrap"><img src="..."></div>包裹图片 - 给
.img-wrap设置position: relative - 用
.img-wrap:hover::after创建覆盖层
::after 蒙层的必备样式有哪些？
只写 content: "" 不够，缺了关键几项会导致蒙层不显示、不覆盖或无法悬停。
立即学习“前端免费学习笔记（深入）”；
必须包含的声明：
-
content: ""—— 伪元素存在的前提 -
position: absolute—— 让它脱离文档流，盖在图片上 -
top: 0; left: 0; width: 100%; height: 100%—— 确保完全覆盖容器 -
background-color: rgba(0,0,0,0.6)—— 半透明底色（注意用rgba，别用opacity，否则会透出文字） -
z-index: 1—— 确保在图片之上（但低于可能的文字描述）
漏掉 position: absolute 或 top/left/width/height 中任意一项，蒙层就可能缩成一个小点、偏移、或根本不可见。
如何在蒙层上显示文字描述？
不能把文字塞进 ::after，因为它的 content 只支持字符串字面量或属性值（attr()），不适合排版。
推荐方案：在容器内额外加一个 <div class="caption">描述文字</div>，然后控制它的显隐：
- 默认设为
opacity: 0或visibility: hidden，并加过渡动画 - 用
.img-wrap:hover .caption触发显示（opacity: 1/visibility: visible） -
.caption本身也要设position: absolute和z-index: 2，确保在蒙层之上
示例关键 CSS：
.img-wrap {
position: relative;
display: inline-block;
}
.img-wrap::after {
content: "";
position: absolute;
top: 0; left: 0; width: 100%; height: 100%;
background-color: rgba(0,0,0,0.6);
opacity: 0;
transition: opacity 0.3s;
z-index: 1;
}
.img-wrap:hover::after {
opacity: 1;
}
.caption {
position: absolute;
bottom: 0; left: 0; right: 0;
padding: 12px;
color: white;
font-size: 14px;
z-index: 2;
opacity: 0;
transition: opacity 0.3s;
}
.img-wrap:hover .caption {
opacity: 1;
}
移动端点击穿透和过渡性能要注意什么？
在 iOS Safari 或部分安卓浏览器中，:hover 在触摸设备上行为不稳定：可能不触发、延迟触发，或点击后残留 hover 状态。
解决方案：
- 加
@media (hover: hover) and (pointer: fine)媒体查询，只对支持精细指针的设备启用 hover 效果 - 避免对
opacity做过渡——它会触发重绘；改用transform: translateZ(0)或will-change: opacity提升图层 - 如果要兼容触屏，建议同时监听
touchstart加 class 切换，而不是纯依赖:hover
真正容易被忽略的是：蒙层和文字的 transition 必须写在「常态」规则里，而不是只写在 :hover 下，否则首次悬停会无动画。
