Comment puis-je créer des images d'arrière-plan dynamiques pour un pied de page à l'aide de SASS ?

Images d'arrière-plan dynamiques avec SASS

Lorsque vous stylisez le pied de page d'un site Web avec plusieurs widgets, l'ajout d'un intérêt visuel avec des images d'arrière-plan uniques peut améliorer l'esthétique. En utilisant SASS, vous pouvez randomiser la sélection de l'image d'arrière-plan à partir d'une liste définie.

Solution utilisant la fonction aléatoire de SASS

SASS v3.3.0 a introduit la fonction random(). En combinant cela avec une liste d'URL d'images et une interpolation de variables, il est possible de générer du CSS qui choisit dynamiquement une image d'arrière-plan aléatoire lors de la compilation.

$imgKey: random(5);

$list: "url('http://domain.com/blablabla/apple.png'),
        url('http://domain.com/blablabla/banana.png'),
        url('http://domain.com/blablabla/cherry.png'),
        url('http://domain.com/blablabla/durian.png'),
        url('http://domain.com/blablabla/eggplant.png')";

$nth: nth($list, $imgKey);

#footer-widgets .container .row {
    background-image: $nth;
    background-position: right bottom;
    background-repeat: no-repeat;
}

Exemple en direct

Reportez-vous à l'exemple en direct disponible sur : http://sassmeister.com/gist/8966210.

Remarque importante

Gardez à l'esprit que, comme pour toute compilation SASS, la sélection aléatoire d'images ne se produit que pendant la compilation SASS, pas nécessairement à chaque visite de 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!