Comment puis-je définir dynamiquement des images d'arrière-plan en CSS à l'aide d'attributs de données ?

Définition de l'image d'arrière-plan avec les propriétés personnalisées CSS

De nombreux éléments de votre code suivent le modèle :

Vous souhaitez définir l'image d'arrière-plan de ces éléments sur la valeur stockée dans le attribut data-image, utilisant du CSS pur.

Tentatives précédentes

Vous avez tenté d'utiliser le code CSS suivant pour y parvenir :

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

Alors que la bordure était correctement affichée , l'image d'arrière-plan n'est pas affectée.

Solution utilisant des propriétés personnalisées

Une alternative viable à l'utilisation d'attributs de données consiste à utiliser des propriétés personnalisées CSS. Étant donné que leurs valeurs ne sont pas limitées aux chaînes, vous pouvez attribuer n'importe quel type valide.

De plus, les propriétés personnalisées vous permettent de mettre à jour les valeurs de manière dynamique via un échange de feuille de style.

Voici comment utiliser les propriétés personnalisées pour définir l'image d'arrière-plan :

.kitten {
  width: 525px;
  height: 252px;
  background-image: var(--bg-image);
}

<div>
<p>Dans cet exemple, la propriété --bg-image est définie dans la feuille de style et attribuée à l'URL de l'image. L'attribut style sur l'élément div définit la valeur de --bg-image en utilisant le style en ligne. Cela vous permet de spécifier l'image d'arrière-plan pour chaque élément individuel sans modifier la feuille de style.</p>
<p>En tirant parti des propriétés personnalisées, vous gagnez en flexibilité et en maintenabilité dans la définition des images d'arrière-plan via les attributs de données.</p>
</div>

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!