用CSS的:hover配合伪元素或额外容器可实现图片悬停显示半透明遮罩层，关键在于相对定位容器、绝对定位遮罩层及opacity过渡动画，无需JavaScript。
用CSS的:hover配合伪元素或额外容器，就能让图片悬停时显示半透明遮罩层。关键在于图层叠加和过渡效果，不需要JavaScript。
方法一：用伪元素 ::before 叠加遮罩
给图片外层加一个相对定位的容器，再用伪元素覆盖在图片上方：
<div class="img-container"> @@##@@ </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让显示更平滑
方法二：用子元素遮罩（兼容性更好）
适合需要在遮罩上放文字或按钮的场景：
<div class="img-wrapper"> @@##@@ <div class="overlay"></div> </div>
CSS：
html-to-pptx-converter
下载
使用 PptxGenJS 和 Python 解析，将结构化的 HTML/CSS 幻灯片内容转换为原生、可编辑的 PowerPoint（.pptx）演示文稿。
.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 冲突，否则遮罩可能被裁剪或压在底层。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
