Bonjour,
Je suis bloqué depuis un certain temps sur un problème plutôt inattendu. j'ai une section avec des cards, et je souhaite placer une image differente sur chaque card. Pour cela, le nom de l'image est placé dans un data attribute sur ma card. En css, lorsque je veux placer le background dans mon pseudo element ::before, au lieu de remplacer par le chemin de l'image, il laisse le code en brut. Je sais pas si c'est très clair, alors voici des images pour comprendre.
MAQUETTE
(edit : visiblement le forum ne prend pas en charge les images 🤔 donc je met le lien direct : https://user.oc-static.com/upload/2023/01/04/16728397538055_image_2023-01-04_144257955.png)
CSS
background-color: $blue1;
box-shadow: 0px 0px 50px $blue2;
max-width: 230px;
width: 250px;
min-height: 300px;
text-align: center;
&:before {
position: relative;
content: '';
background: url(attr(data-logo)); /* BUG */
background-size: contain;
background-repeat: no-repeat;
border-radius: 100px;
margin: 0 auto;
margin-top: -45px;
display: block;
width: 90px;
height: 90px;
}
}
HTML (d'une des 8 card)
<div data-logo="html-5.png" class="skill">
<h3>HTML 5</h3>
<span class="level">100%</span>
</div>
CE QUE J'AI DANS L'INSPECTEUR
(edit : idem ici : https://user.oc-static.com/upload/2023/01/04/16728400202887_image_2023-01-04_144725217.png)
On voit que attr() n'est pas remplacé par la valeur, donc forcément ca ne fonctionne pas.
J'ai essayé plusieurs truc pour resoudre le problème :
- Passer par des variables Sass
- passer par des variables CSS
- faire une fonction JS (mais vu que je veux appliquer le background sur un pseudo element, donc pas dans le DOM, je peux pas)
Et là je sèche, j'ai plus d'idée. Quelqu'un saurait comment faire ? Dans le pire des cas je le ferais à la main avec une class par card. Ca aura pas vocation à etre modifié dans le futur donc c'est pas grave, mais ca serait cool quand meme de l'automatiser entre guillemets.
Merci d'avance !
AnttonDev