用CSS的:hover配合伪元素或额外容器可实现图片悬停显示半透明遮罩层，关键在于相对定位容器、绝对定位遮罩层及opacity过渡动画，无需JavaScript。
用CSS的:hover配合伪元素或额外容器，就能让图片悬停时显示半透明遮罩层。关键在于图层叠加和过渡效果，不需要JavaScript。
方法一：用伪元素 ::before 叠加遮罩
给图片外层加一个相对定位的容器，再用伪元素覆盖在图片上方：
<div class="img-container"> <img src="example.jpg" alt="示例图"> </div>
CSS写法：
.img-container {
position: relative;
display: inline-block;
}
.img-container img {
display: block;
transition: opacity 0.3s ease;
}
.img-container::before {
content: '';
position: absolute;
top: 0; left: 0; right: 0; bottom: 0;
background: rgba(0, 0, 0, 0.5); /* 半透明黑色遮罩 */
opacity: 0;
transition: opacity 0.3s ease;
}
.img-container:hover::before {
opacity: 1;
}说明：
立即学习“前端免费学习笔记（深入）”；
- 容器必须设
position: relative，否则伪元素无法准确定位 -
rgba(0,0,0,0.5)中的0.5是透明度，可调为0.3～0.8 - 加
transition让显示更平滑
方法二：用子元素遮罩（兼容性更好）
适合需要在遮罩上放文字或按钮的场景：
Wechat Article Html
下载
将 Markdown 文章转换为微信公众号兼容的纯 HTML 格式。当用户要求"转成微信格式"、"生成公众号文章 HTML"、"排版到微信草稿箱"、"微信粘贴格式"时触发。输出带内联样式的纯 HTML，微信编辑器可直接渲染，无需额外适配。支持标题、段落、列表、粗体、行内代码、表格、引用块、代码块、配图的完整转换。
<div class="img-wrapper"> <img src="example.jpg" alt="示例图"> <div class="overlay"></div> </div>
CSS：
.img-wrapper {
position: relative;
display: inline-block;
}
.img-wrapper img {
display: block;
}
.img-wrapper .overlay {
position: absolute;
top: 0; left: 0; width: 100%; height: 100%;
background: rgba(255, 255, 255, 0.7); /* 白色半透明 */
opacity: 0;
transition: opacity 0.25s;
}
.img-wrapper:hover .overlay {
opacity: 1;
}优点：
- 支持IE9+，伪元素在极老浏览器中可能不生效
- 后续可在
.overlay里直接加文字、图标或链接
进阶技巧：悬停时图片变暗 + 遮罩渐显
增强视觉反馈，让效果更自然：
.img-container:hover img {
opacity: 0.85; /* 图片本身也轻微变暗 */
}
.img-container:hover::before {
opacity: 1;
background: rgba(0, 0, 0, 0.45);
}或者加一点缩放动画：
.img-container img {
transition: all 0.3s ease;
}
.img-container:hover img {
transform: scale(1.02);
}不复杂但容易忽略：确保图片父容器没有溢出隐藏（overflow: hidden）或 z-index 冲突，否则遮罩可能被裁剪或压在底层。
