Comment SASS peut-il vous aider à sélectionner aléatoirement des images d'arrière-plan ?

Sélection aléatoire d'images d'arrière-plan dans SASS

Vous cherchez à embellir vos pages Web avec un élément de surprise ? SASS permet de sélectionner aléatoirement une image de fond dans une liste prédéfinie, ajoutant une touche de dynamisme à votre site Web.

Générer des images de fond aléatoires avec SASS

Propositions Sass une fonction aléatoire pratique qui peut être utilisée pour choisir un nombre aléatoire dans une plage spécifiée. En combinant cette fonction avec une liste d'URL d'images, nous pouvons créer du CSS avec une image d'arrière-plan qui varie à chaque fois que SASS est compilé.

Exemple de code :

$imgKey: random(5);

$list: apple, banana, cherry, durian, eggplant;
$nth: nth($list, $imgKey);

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

Dans cet exemple, $imgKey récupère un nombre aléatoire entre 1 et 5. La fonction $nth sélectionne ensuite l'URL de l'image correspondant à ce nombre aléatoire dans la variable $list. Le résultat est une règle CSS qui attribue une image d'arrière-plan aléatoire à la ligne du conteneur spécifiée.

Compilation et sélection d'images

Il est important de noter que l'image d'arrière-plan aléatoire sera ne change que lorsque le SASS est recompilé, pas à chaque fois que la page est visitée. Cela garantit que la sélection aléatoire est reflétée de manière cohérente sur plusieurs chargements de pages, évitant ainsi les changements visuels brusques.

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!