هناك بعض الأماكن حيث مجموعة المستخدم CSS لا تعمل

مطور
1

لقد استخدمت CSS لمجموعة المستخدمين لتعيين مربع صورة رمزية لكل مجموعة مستخدمين، ووجدت أن CSS عمل في بعض الأماكن ولم يعمل في أماكن أخرى.

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

كيف الحال؟ هل تم حل المشكلة؟ من أين وجدت هذه الميزة، تبدو مثيرة للاهتمام.