通过设置相对定位容器和绝对定位的::after伪元素，创建默认透明的覆盖层，利用:hover触发其opacity变化实现遮罩显现。1. 容器设position: relative；2. ::after创建背景遮罩，默认opacity: 0；3. :hover时opacity变为1；4. 可配合img的opacity过渡增强视觉效果。关键在于定位与transition配合。
要实现图片在悬停时透明度发生变化，并结合 ::after 伪元素和 :hover，可以用于创建如“鼠标移上显示文字遮罩”等视觉效果。以下是具体实现方法。
通过设置图片容器的相对定位，使用 ::after 在图片上方添加一个覆盖层，默认隐藏或半透明，当鼠标悬停时通过 :hover 改变该覆盖层的 opacity（透明度），从而实现渐变或显现效果。
<div class="img-container"> @@##@@ </div>
关键点是给容器设置 position: relative，然后为 ::after 设置绝对定位，覆盖在图片之上。
立即学习“前端免费学习笔记（深入）”；
.img-container {
position: relative;
display: inline-block;
}
<p>.img-container img {
display: block;
transition: opacity 0.3s ease;
}</p><p>/<em> 创建覆盖层 </em>/
.img-container::after {
content: '';
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: rgba(0, 0, 0, 0.5); /<em> 半透明黑色遮罩 </em>/
opacity: 0; /<em> 默认完全透明，不可见 </em>/
transition: opacity 0.3s ease;
}</p><p>/<em> 悬停时显示遮罩 </em>/
.img-container:hover::after {
opacity: 1; /<em> 完全不透明，遮罩显现 </em>/
}</p>如果你想让图片本身也变透明，可以同时控制 img 的 opacity：
立即学习“前端免费学习笔记（深入）”；
.img-container img {
transition: opacity 0.3s ease;
opacity: 1;
}
<p>.img-container:hover img {
opacity: 0.8; /<em> 图片稍微变透明 </em>/
}</p>这样，悬停时图片略微变淡，同时上面的遮罩显现，增强交互感。
基本上就这些，利用 :hover 触发 ::after 的 opacity 变化，就能轻松实现优雅的悬停透明效果。关键是定位和过渡动画的配合。
以上就是css图片在悬停时透明度变化如何实现_使用::after和opacity结合:hover的详细内容，更多请关注php中文网其它相关文章！
每个人都需要一台速度更快、更稳定的 PC。随着时间的推移，垃圾文件、旧注册表数据和不必要的后台进程会占用资源并降低性能。幸运的是，许多工具可以让 Windows 保持平稳运行。
广告Copyright 2014-2025 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号
788
收藏
取消收藏
