Il y a certains endroits où le groupe d'utilisateurs CSS ne fonctionne pas

Dev
1

J’ai utilisé le CSS des groupes d’utilisateurs pour attribuer une boîte d’avatar à chaque groupe d’utilisateurs, et j’ai constaté que le CSS fonctionnait dans certains endroits et pas dans d’autres.

image
image1657×232 39.6 KB

css

//---------------------------- Définition de la bordure d'avatar début----------------------------
$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;
}

// Ajustement de la bordure d'avatar de la carte utilisateur
.d-user-card__avatar > .avatar-wrappers::after{
  top: -50px;
}


//---------------------------- Définition de la bordure d'avatar fin----------------------------
2

Comment ça va ? Le problème est-il résolu ? Où avez-vous trouvé cette fonctionnalité, elle semble intéressante.