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

Randomisation des images d'arrière-plan avec SASS

Si vous devez générer du CSS avec une image d'arrière-plan sélectionnée au hasard dans une liste, SASS fournit une solution efficace . Avec l'introduction de la fonction aléatoire dans Sass v3.3.0, vous pouvez facilement réaliser cette sélection aléatoire.

Implémentation

Pour implémenter la sélection aléatoire d'images d'arrière-plan, vous allez devez définir une liste d'images ($list) et une variable ($imgKey) pour la fonction aléatoire :

$imgKey: random(5);

$list: apple, banana, cherry, durian, eggplant;

Dans votre CSS, utilisez la fonction nth() pour sélectionner l'image appropriée en fonction du clé aléatoire :

#footer-widgets .container .row {
    background-image: url("/images/#{$nth($list, $imgKey)}.jpg");
    ...
}

Exemple en direct

Visitez l'exemple en direct sur http://sassmeister.com/gist/8966210 pour voir cette technique en action.

Remarque : N'oubliez pas que la valeur aléatoire ne changera que lorsque le Sass sera compilé, ce qui peut ne pas se produire à chaque accès à votre page.

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!