Bagaimana untuk Memilih Imej Latar Belakang Secara Rawak dalam CSS dengan SASS?

Merawak Imej Latar Belakang dengan SASS

Jika anda perlu mengeluarkan CSS dengan imej latar belakang yang dipilih secara rawak daripada senarai, SASS menyediakan penyelesaian yang berkesan . Dengan pengenalan fungsi rawak dalam Sass v3.3.0, anda boleh mencapai pemilihan rawak ini dengan mudah.

Pelaksanaan

Untuk melaksanakan pemilihan imej latar belakang rawak, anda akan perlu mentakrifkan senarai imej ($list) dan pembolehubah ($imgKey) untuk fungsi rawak:

$imgKey: random(5);

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

Dalam CSS anda, gunakan fungsi nth() untuk memilih imej yang sesuai berdasarkan kunci rawak:

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

Contoh Langsung

Lawati contoh langsung di http://sassmeister.com/gist/8966210 untuk melihat teknik ini beraksi.

Nota: Ingat bahawa nilai rawak hanya akan berubah apabila Sass disusun, yang mungkin tidak berlaku setiap kali halaman anda diakses.

Atas ialah kandungan terperinci Bagaimana untuk Memilih Imej Latar Belakang Secara Rawak dalam CSS dengan SASS?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!