Wie wähle ich mit SASS zufällig Hintergrundbilder in CSS aus?

Hintergrundbilder mit SASS randomisieren

Wenn Sie CSS mit einem zufällig ausgewählten Hintergrundbild aus einer Liste ausgeben müssen, bietet SASS eine effektive Lösung . Mit der Einführung der Zufallsfunktion in Sass v3.3.0 können Sie diese zufällige Auswahl leicht erreichen.

Implementierung

Um eine zufällige Hintergrundbildauswahl zu implementieren, müssen Sie Folgendes tun Sie müssen eine Liste von Bildern ($list) und eine Variable ($imgKey) für die Zufallsfunktion definieren:

$imgKey: random(5);

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

Verwenden Sie in Ihrem CSS die Funktion nth(), um das entsprechende Bild basierend auf auszuwählen Zufallsschlüssel:

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

Live-Beispiel

Besuchen Sie das Live-Beispiel unter http://sassmeister.com/gist/8966210, um diese Technik in Aktion zu sehen.

Hinweis: Denken Sie daran, dass sich der Zufallswert nur ändert, wenn das Sass kompiliert wird, was möglicherweise nicht bei jedem Zugriff auf Ihre Seite der Fall ist.

Das obige ist der detaillierte Inhalt vonWie wähle ich mit SASS zufällig Hintergrundbilder in CSS aus?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!