Maison > interface Web > tutoriel CSS > Comment sélectionner aléatoirement des images d'arrière-plan dans SASS ?

Comment sélectionner aléatoirement des images d'arrière-plan dans SASS ?

Linda Hamilton
Libérer: 2024-11-16 13:41:02
original
259 Les gens l'ont consulté

How to Randomly Select Background Images in SASS?

Images d'arrière-plan dynamiques dans SASS utilisant une sélection aléatoire

Pour améliorer l'attrait visuel d'un site Web, il est courant d'incorporer des images d'arrière-plan. Cependant, si vous souhaitez ajouter une touche de variabilité à vos créations, sélectionner des images au hasard dans une liste à l'aide de SASS peut être une technique puissante.

Objectif :

Générer Code SASS pour choisir au hasard une image d'arrière-plan dans une liste prédéterminée et l'insérer dans un CSS sélecteur.

Solution :

Dans les versions récentes de SASS, la fonction random() offre la possibilité de générer des nombres aléatoires. En combinant cela avec une liste d'URL d'images stockées dans une variable, vous pouvez sélectionner dynamiquement une image d'arrière-plan pour vos règles CSS.

Considérez l'exemple suivant :

$image-list: (
  "url(domain.com/blablabla/image1.png)",
  "url(domain.com/blablabla/image2.png)",
  "url(domain.com/blablabla/image3.png)",
  "url(domain.com/blablabla/image4.png)",
  "url(domain.com/blablabla/image5.png)"
);

$random-image: random(length($image-list));

#footer-widgets .container .row {
  background-image: nth($image-list, $random-image);
}
Copier après la connexion

Dans cet exemple, une liste d'URL d'images est stockée dans la variable $image-list. La fonction random() permet de générer un entier aléatoire compris entre 1 et 5 (la longueur de la liste). La fonction nth() est utilisée pour obtenir l'URL de l'image à l'index aléatoire spécifié.

Le CSS compilé inclura l'URL de l'image d'arrière-plan sélectionnée au hasard dans la propriété background-image du sélecteur CSS spécifié. Ce code garantit qu'une image d'arrière-plan différente est utilisée à chaque fois que le SASS est compilé.

Considérations :

Il est important de noter que la valeur aléatoire n'est générée que pendant le Sass compilation. Cela signifie que l'image d'arrière-plan restera la même jusqu'à ce que le SASS soit à nouveau compilé, quelles que soient les visites de pages.

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!

source:php.cn
Déclaration de ce site Web
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn
Derniers articles par auteur
Tutoriels populaires
Plus>
Derniers téléchargements
Plus>
effets Web
Code source du site Web
Matériel du site Web
Modèle frontal