Wie kann ich mit SASS dynamische Hintergrundbilder für eine Fußzeile erstellen?

Dynamische Hintergrundbilder mit SASS

Beim Gestalten der Fußzeile einer Website mit mehreren Widgets kann das visuelle Interesse durch einzigartige Hintergrundbilder die Ästhetik verbessern. Mit SASS können Sie die Hintergrundbildauswahl aus einer definierten Liste randomisieren.

Lösung mit der Zufallsfunktion von SASS

SASS v3.3.0 führte die Funktion random() ein. Durch die Kombination mit einer Liste von Bild-URLs und variabler Interpolation ist es möglich, CSS zu generieren, das während der Kompilierung dynamisch ein zufälliges Hintergrundbild auswählt.

$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;
}

Live-Beispiel

Siehe Live-Beispiel verfügbar unter: http://sassmeister.com/gist/8966210.

Wichtig Hinweis

Beachten Sie, dass die zufällige Bildauswahl wie bei jeder SASS-Kompilierung nur während der SASS-Kompilierung erfolgt, nicht unbedingt bei jedem Seitenbesuch.

Das obige ist der detaillierte Inhalt vonWie kann ich mit SASS dynamische Hintergrundbilder für eine Fußzeile erstellen?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!