在css3中，使用 ::after 伪元素实现图片鼠标悬浮遮罩渐显的核心做法是：将 ::after 定位在图片上方，设置半透明背景色，默认隐藏（透明度为0），并在父容器悬停时通过过渡动画将其显示出来。
如何构建基础的遮罩结构并控制层级？
要实现这一效果，首先需要确保 ::after 能够覆盖在图片之上。这要求父容器设置为相对定位，而 ::after 设置为绝对定位，并铺满整个父容器区域。同时，必须设置合适的 z-index 以确保遮罩层位于图片层之上，但低于可能存在的其他交互元素。
.image-container {
position: relative;
display: inline-block;
width: 300px;
height: 200px;
}
.image-container img {
display: block;
width: 100%;
height: 100%;
object-fit: cover;
}
.image-container::after {
content: "";
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: rgba(0, 0, 0, 0.5);
opacity: 0;
transition: opacity 0.3s ease;
z-index: 1;
}
上述代码定义了基本的HTML结构和CSS样式。 .image-container 作为父容器，包含一张图片和一个 ::after 伪元素。图片正常显示，而 ::after 初始状态下不可见。当用户将鼠标悬停在 .image-container 上时，触发 :hover 状态，此时 ::after 的透明度变为1，从而显示出半透明的黑色遮罩。
如何优化过渡效果与视觉反馈？
为了让遮罩效果更加平滑且符合用户体验，需要调整过渡属性以及遮罩的颜色和位置。通常，我们会希望遮罩从中心扩散或者简单地淡入淡出。此外，还可以结合文字说明或其他内容一起显示，以增强信息传达。
.image-container:hover::after {
opacity: 1;
}
/* 可选：添加文字说明 */
.image-container .caption {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
color: white;
font-size: 18px;
text-align: center;
opacity: 0;
transition: opacity 0.3s ease;
z-index: 2;
}
.image-container:hover .caption {
opacity: 1;
}
在第二个代码示例中，我们增加了 .caption 类，用于在遮罩出现的同时显示居中的白色文字说明。同样地， .caption 默认也是隐藏的，只有在父容器悬停时才变得可见。这样，用户不仅看到遮罩，还能看到相关的描述信息，提升了交互体验。注意， .caption 的 z-index 设置为2，高于遮罩层的1，确保文字清晰可读。
如果图片尺寸动态变化，遮罩是否依然有效？
是的，只要父容器的宽高正确反映图片的实际尺寸，遮罩就会自动适应。关键在于使用百分比单位或 width/height: 100% 来让 ::after 继承父容器的尺寸。即使图片通过 object-fit 进行裁剪或缩放，只要父容器保持固定比例或自适应，遮罩仍能准确覆盖可视区域。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
