css 头像样式 |java web 引入css文件路径问题

.avatar {
display: inline-block;
width: 80px;
height: 80px;
border-radius: 50%;
overflow: hidden;
position: relative;
}
.avatar img {
display: block;
width: 100%;
height: 100%;
object-fit: cover;
}
.avatar::before {
content: '';
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
width: 100%;
height: 100%;
border-radius: 50%;
background-color: rgba(255, 255, 255, 0.2);
opacity: 0;
transition: opacity 0.3s;
}
.avatar:hover::before {
opacity: 1;
}

上述代码中，大家先创建一个 class=”avatar” 的元素，并设置宽高、边框半径、溢出隐藏以及定位。接着，大家在这个元素之后插入一张图片，并设置图片的显示方式为覆盖，让其在头像中居中显示。

为了让头像更加突出，大家在头像上方添加一个透明的半径为 50% 的圆形元素，并通过伪类选择器 ::before 加上一个过渡效果。当鼠标悬停在头像上时，这个圆形元素将变为不透明，让头像更加显眼。