图片加上蒙层，鼠标上移显示出图片

@呵呵

于 2024-03-26 11:23:49 发布

阅读量292

点赞数 2

CC 4.0 BY-SA版权

文章标签： javascript 前端开发语言

本文链接：https://blog.youkuaiyun.com/weixin_41639609/article/details/137040724

这篇文章介绍了如何使用CSS实现一个具有圆角、背景图片和动态悬停效果的头像，通过`.avatar`类展示了如何结合`:before`和`:after`伪元素以及`clip-path`属性来实现这一效果。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

在这里插入图片描述

 <div class="avatar"></div>
 .avatar{
background: url(./OIP-C.jpg) center no-repeat;
width: 200px;
height: 200px;
border-radius: 50%;
cursor: pointer;
object-fit:cover;
position: relative;
}
.avatar::before,.avatar::after{
content:'';
position: absolute;
inset: 0;
border-radius: inherit;
}
.avatar::before{
background: rgba(0, 0,0,0.7);
}
.avatar::after{
background: inherit;
clip-path:circle(0% at 50% 50%);
transition: 0.5s;
}
.avatar:hover::after{
clip-path:circle(50% at 50% 50%)
}