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

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

DDD
Libérer: 2024-11-18 21:50:02
original
1039 Les gens l'ont consulté

How can I create dynamic background images for a footer using 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;
}
Copier après la connexion

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!

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
Tutoriels populaires
Plus>
Derniers téléchargements
Plus>
effets Web
Code source du site Web
Matériel du site Web
Modèle frontal