28172 sujets

CSS et mise en forme, CSS3

[Résolu] Attr() et background-image

Modérateur
Salut tout le monde,

Bien que j'ai fait différemment, j'ai tenté de faire ceci : 

<ul class="commentaires">
    <li data-img="/static/img/avatar.png">
        <!-- la suite -->
    </li>
</ul>




.commentaires li{
    background-image: url(attr(data-img));
    // la suite
}


Bizarrement, ça ne fonctionne pas. Savez-vous pourquoi ?

Si je fais ceci, le text s'affiche : 

.commentaires li:before{
    content: attr(data-img);
}

Modifié par niuxe (04 May 2023 - 17:54)
Etrange en effet, le site MDN semble prétendre en effet que cette approche est possible :
"https://developer.mozilla.org/fr/docs/Web/CSS/url" a écrit :
La fonction url() peut être utilisée comme paramètre d'une autre fonction comme attr().

Même si tu n'en a pas besoin, voici une autre approche du même genre :
<ul class="commentaires">
    <li style="--url:url(/image.webp)">
    </li>
</ul>

.commentaires li{
    background-image: var(--url);
}

Modifié par Olivier C (04 May 2023 - 18:16)
Meilleure solution
Modérateur
Sur la MDN, j'ai vu que attr() est expérimental. Je pense que le souci vient de là.

@Olivier : ah oui, c'est pas bête comme idée Smiley smile Je ne pensais pas que c'était possible d'insérer un style en ligne une var css.
Je le fais très fréquemment pour définir les styles. Par exemple, les avatars de cette page utilisent cette méthode. Je le fais beaucoup pour les couleurs aussi, et récemment pour des paramètres de grilles. Ça soulage beaucoup la feuille de styles dans certaines situations.
Modifié par Olivier C (04 May 2023 - 18:06)
Modérateur
Bonjour,
niuxe a écrit :
Bizarrement, ça ne fonctionne pas. Savez-vous pourquoi ?

La fonction attr() pour la propriété css content a été spécifiée il y a longtemps. Tandis que pour les autres propriétés css, elle a été spécifiée bien après.

Ceci explique pourquoi attr() fonctionne avec content mais toujours pas avec background-image.

Amicalement,
Modérateur
Merci parsimonhi pour cette précision.

Bien à toi
Modifié par niuxe (06 May 2023 - 01:05)
Prévenir un modérateur
Répondre au sujet
Aller à