There are some places where the user group CSS does not work

Development

AI-generated summary

Issue with User Group CSS: sheng_hualuo is experiencing inconsistent application of user group CSS, specifically with assigning avatar boxes to each user group. The CSS code is provided, defining avatar frames for different user groups (e.g., “Black-Hat-Hacker”, “Grey-Hat-Hacker”). copymonopoly responded, inquiring about the status of the issue and expressing interest in the feature.

1

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

image
image1657×232 39.6 KB

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;
}


//<----------------------------头像框定义结束---------------------------->
2

How is it going? Has it been resolved? Where did you find this feature? It seems quite interesting.