Comment puis-je utiliser un attribut de données pour définir une image d'arrière-plan CSS ?

Image d'arrière-plan CSS à partir de l'attribut data-image

En HTML, les éléments ont souvent des attributs de données utilisés pour stocker des informations supplémentaires. La définition d'une image d'arrière-plan sur la valeur d'un attribut de données peut être obtenue uniquement via CSS.

Le problème

Le code CSS fourni :

div[data-image] {
    border: 2px solid black;
    background-image: attr(data-image url);
}

ne parvient pas à afficher l'image d'arrière-plan.

La solution : personnalisée Propriétés

Une approche alternative consiste à utiliser des propriétés personnalisées CSS, qui permettent de définir tout type de valeur, y compris les URL.

.kitten {
  background-image: var(--bg-image);
}

Ensuite, définissez la propriété personnalisée dans le style de l'élément. attribut :

<div class="kitten">

Cette approche permet des mises à jour dynamiques de l'image d'arrière-plan via des modifications CSS ou des interactions de script.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!