I used user group css to assign an avatar box to each user group, and I found that some places the css worked, and some places didn’t
css
//<----------------------------头像框定义开始---------------------------->
$avatar-frame-1: "https://oss.goshell.pro/Avatar-frame/1.png";
$avatar-frame-2: "https://oss.goshell.pro/Avatar-frame/2.png";
$avatar-frame-3: "https://oss.goshell.pro/Avatar-frame/3.png";
$avatar-frame-4: "https://oss.goshell.pro/Avatar-frame/4.png";
$avatar-frame-5: "https://oss.goshell.pro/Avatar-frame/5.png";
$avatar-frame-6: "https://oss.goshell.pro/Avatar-frame/6.png";
$groups: "Black-Hat-Hacker", "Grey-Hat-Hacker", "White-Hat-Hacker", "Red-Hat-Hacker", "Blue-Hat-Hacker", "Green-Hat-Hacker";
$Avatar-frames: $avatar-frame-1, $avatar-frame-2, $avatar-frame-3, $avatar-frame-4, $avatar-frame-5, $avatar-frame-6;
.avatar-wrappers{
position: relative;
display: inline-block;
}
@each $group,$avatar-frame in zip($groups, $Avatar-frames) {
.group-#{$group} .avatar-wrappers::after{
content: "";
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-image: url(#{$avatar-frame});
background-size: contain;
background-repeat: no-repeat;
background-position: center;
pointer-events: none;
z-index: 1;
transform: scale(1.3);
}
}
.avatar-wrappers > img {
object-fit: cover;
display: block;
}
// 用户卡片头像框调整
.d-user-card__avatar > .avatar-wrappers::after{
top: -50px;
}
//<----------------------------头像框定义结束---------------------------->