img是替换元素，不支持伪元素，需用容器包裹并设position: relative；遮罩用容器伪元素或子元素实现，背景推荐rgba(0,0,0,0.6)；响应式下需清除img基线间隙并确保遮罩贴合图片内容盒；移动端需兼容touch，可用cursor: pointer或JS监听。
hover 遮罩层怎么加在 img 上不破坏布局
直接给 <img> 加 :hover::after 无效——<img> 是替换元素，不支持伪元素。必须用容器包裹，比如 <div class="img-wrap">，再把遮罩层作为子元素或伪元素加在容器上。
常见错误是把 position: relative 忘在容器上，导致 absolute 遮罩层脱离预期位置。务必确认容器有定位上下文：
<div class="img-wrap"><img src="..."></div>- CSS 中给
.img-wrap加position: relative; - 遮罩层用
.img-wrap::before或单独<span class="overlay"></span>
遮罩变色用 background-color 还是 rgba 背景
用纯色 background-color: #000 悬停时会完全盖住图片；更常用的是半透黑色：background-color: rgba(0, 0, 0, 0.6)。注意 alpha 值别设成 0 —— rgba(0,0,0,0) 看不见，但依然占渲染层，可能误阻点击；设成 0.01 也不推荐，视觉无意义还多一次重绘。
如果要兼容 IE9 及以下（极少见），得降级用 filter: alpha(opacity=60)，但现在基本不用考虑。
立即学习“前端免费学习笔记（深入）”；
示例关键 CSS：
.img-wrap {
position: relative;
display: inline-block;
}
.img-wrap::before {
content: '';
position: absolute;
top: 0; left: 0; right: 0; bottom: 0;
background-color: rgba(0, 0, 0, 0.6);
opacity: 0;
transition: opacity 0.3s ease;
}
.img-wrap:hover::before {
opacity: 1;
}
响应式图片下遮罩怎么自适应宽高
遮罩层必须和图片尺寸完全一致，否则在 max-width: 100% 或 object-fit 场景下会错位。核心是让遮罩层“贴住”图片内容盒，而不是父容器盒。
- 给
<img>设display: block，消除底部默认留白（inline 元素的基线间隙） - 遮罩伪元素用
top/left/right/bottom: 0+position: absolute，它会相对于.img-wrap定位，而后者尺寸由图片撑开 - 如果图片用了
object-fit: cover，确保.img-wrap有明确宽高比（如用padding-top: 56.25%的 aspect-ratio hack），否则遮罩会覆盖整个容器而非图像可视区
移动端 hover 不触发？得补 touch 兼容
iOS Safari 和多数安卓浏览器在非链接/按钮元素上不触发 :hover，尤其在没有 tappable 语义时。简单方案是加 cursor: pointer，它会悄悄激活 hover 行为；更稳妥的是加空 onclick（仅需存在，不必写逻辑）：
<div class="img-wrap" onclick=""><img ...></div>
或者用媒体查询兜底：
@media (hover: none) and (pointer: coarse) {
.img-wrap:hover::before,
.img-wrap:active::before {
opacity: 1;
}
}
不过要注意：在 touch 设备上，:active 是瞬时态，用户松手就消失，体验不如 hover 平滑。真要兼顾，建议改用 JS 监听 touchstart/touchend 切换 class。
最常被忽略的是：遮罩颜色在深色模式下是否可读——如果图片本身暗，叠加 rgba(0,0,0,0.6) 几乎看不出变化。建议用 color-scheme: light dark 配合 @media (prefers-color-scheme: dark) 微调透明度或色调。
