Bagaimanakah saya boleh mencipta imej latar belakang dinamik untuk pengaki menggunakan SASS?

Imej Latar Belakang Dinamik dengan SASS

Apabila menggayakan pengaki tapak web dengan berbilang widget, menambahkan minat visual dengan imej latar belakang yang unik boleh meningkatkan estetika. Menggunakan SASS, anda boleh rawak pemilihan imej latar belakang daripada senarai yang ditentukan.

Penyelesaian Menggunakan Fungsi Rawak SASS

SASS v3.3.0 memperkenalkan fungsi rawak(). Dengan menggabungkan ini dengan senarai URL imej dan interpolasi pembolehubah, adalah mungkin untuk menjana CSS yang secara dinamik memilih imej latar belakang rawak semasa penyusunan.

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

Contoh Langsung

Rujuk contoh langsung boleh didapati di: http://sassmeister.com/gist/8966210.

Nota Penting

Perlu diingat bahawa, seperti mana-mana kompilasi SASS, pemilihan imej rawak hanya berlaku semasa penyusunan SASS, tidak semestinya semasa setiap lawatan halaman.

Atas ialah kandungan terperinci Bagaimanakah saya boleh mencipta imej latar belakang dinamik untuk pengaki menggunakan SASS?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!