# 有些地方用户组 CSS 不起作用

**URL:** <https://meta.discourse.org/t/there-are-some-places-where-the-user-group-css-does-not-work/319960>\
**Category:** Development\
**Created:** [2024 年8 月 3 日 11:34 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:** 1\
**Showing post:** 1

<div class="post-metadata">

作者： ![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)\
发布日期： [2024 年8 月 3 日 11:34 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>

我使用了用户组 CSS 为每个用户组分配了头像框，发现在有些地方 CSS 生效了，有些地方没有生效。

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

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

```

---

_[View the full topic](https://meta.discourse.org/t/there-are-some-places-where-the-user-group-css-does-not-work/319960)._