Comment puis-je utiliser SASS pour sélectionner aléatoirement une image d'arrière-plan dans une liste d'URL ?

Sass : utilisation d'images d'arrière-plan aléatoires à partir d'une liste désignée

SASS, une puissante extension CSS, fournit des fonctionnalités avancées pour styliser les pages Web. L'une de ces fonctionnalités est la possibilité de sélectionner dynamiquement des images d'arrière-plan à partir d'une liste prédéterminée. Cet article explique comment y parvenir en utilisant SASS.

Question :

Comment puis-je utiliser SASS pour générer du code CSS qui sélectionne aléatoirement une image d'arrière-plan dans une liste fournie de URL ?

Réponse :

Pour accomplir cette tâche, exploitez les puissance de la fonction random() de SASS, introduite dans la version 3.3.0. Cette fonction génère un nombre aléatoire dans une plage spécifiée. En combinant cette fonctionnalité avec une liste prédéfinie d'URL d'images, vous pouvez créer des attributions d'images d'arrière-plan dynamiques.

Considérez l'extrait de code SASS suivant :

$imgKey: random(5);

$list: "image1.jpg", "image2.jpg", "image3.jpg", "image4.jpg", "image5.jpg";
$nth: nth($list, $imgKey);

#footer-widgets .container .row {
    background-image: url("http://domain.com/blablabla/#{$nth}");
    background-position: right bottom;
    background-repeat: no-repeat;
}

Dans cet exemple, le $ La variable list contient la liste des URL d’images. La variable $imgKey génère un nombre aléatoire entre 1 et 5, représentant l'index de l'image à sélectionner dans la liste. La nième fonction($list, $imgKey) extrait l'URL de l'image à cet index.

Remarques supplémentaires :

• L'image d'arrière-plan sélectionnée au hasard ne changera que lorsque le SASS est compilé. Cela peut ne pas se produire à chaque fois qu'une page est visitée.
• Vous pouvez ajuster la plage de la fonction random() pour qu'elle corresponde au nombre d'images dans votre liste.
• Explorez la documentation SASS pour en savoir plus. informations sur les fonctions random() et nth().

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!