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

**URL:** https://meta.discourse.org/t/there-are-some-places-where-the-user-group-css-does-not-work/319960
**Category:** Development
**Created:** [August 3, 2024, 11:34am UTC](https://meta.discourse.org/t/there-are-some-places-where-the-user-group-css-does-not-work/319960 "2024-08-03T11:34:54Z")
**Posts on this page:** 2
**Page:** 1

<div class="post-metadata">

### Author: ![sheng\_hualuo](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/sheng_hualuo/32/430359_2.png) [@sheng\_hualuo](https://meta.discourse.org/u/sheng_hualuo)
#### Post date: [August 3, 2024, 11:34am UTC](https://meta.discourse.org/t/there-are-some-places-where-the-user-group-css-does-not-work/319960/1 "2024-08-03T11:34:54Z")

</div>

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](https://global.discourse-cdn.com/meta/original/4X/8/1/e/81e6d6dcefc2d76f17b90a5203d634521205d70d.png)  
css

```plaintext
//<----------------------------头像框定义开始---------------------------->
$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;
}

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

```

---

<div class="post-metadata">

### Author: ![copymonopoly](https://avatars.discourse-cdn.com/v4/letter/c/4491bb/32.png) [@copymonopoly](https://meta.discourse.org/u/copymonopoly)
#### Post date: [January 3, 2025, 12:16am UTC](https://meta.discourse.org/t/there-are-some-places-where-the-user-group-css-does-not-work/319960/2 "2025-01-03T00:16:29Z")

</div>

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