Bagaimana untuk memasukkan dua imej latar belakang pada masa yang sama dalam css

Apabila menggunakan berbilang imej latar belakang, mula-mula pisahkan nilai atribut imej latar belakang dengan koma dan senaraikan imej yang akan digunakan kemudian gunakan ulangan latar belakang untuk menentukan atribut berulang; -kedudukan untuk menentukan setiap Lokasi gambar kecil sudah memadai.

Persekitaran pengendalian tutorial ini: sistem Windows 7, versi CSS3&&HTML5, komputer Dell G3.

Apabila menggunakan berbilang imej latar belakang, cuma pisahkan nilai atribut imej latar belakang dengan koma, senaraikan imej yang ingin anda gunakan, kemudian gunakan ulang latar belakang untuk mentakrifkan atribut berulang, dan akhirnya gunakan kedudukan latar belakang untuk menentukan Kedudukan setiap gambar kecil.

Kod HTML:

<div></div>

Kod CSS:

background-image: url(images/scroll_top.jpg),
                  url(images/scroll_bottom.jpg),
                  url(images/scroll_middle.jpg);
 
background-repeat: no-repeat, no-repeat, repeat-y;
 
background-position: center top, center bottom, center top;

scroll_top.jpg

scroll_middle.jpg

scroll_bottom.jpg

Apabila mentakrifkan berbilang nilai dengan background-repeat dan background- position , susunan yang ditentukan sepadan dengan susunan imej latar belakang masing-masing.

Singkatan:

Cara yang ditakrifkan di atas boleh mengelirukan, terutamanya apabila ia perlu disusun semula atau diselenggara kemudian. Oleh itu, ramai pereka web suka menggunakan singkatan untuk menentukan berbilang imej latar belakang.

Kod CSS:

background: url(images/scroll_top.jpg) center top no-repeat,
            url(images/scroll_bottom.jpg) center bottom no-repeat,
            url(images/scroll_middle.jpg) center top repeat-y;

Setiap kali url digunakan untuk mentakrifkan imej, kedudukan dan kaedah pengulangan imej ditentukan.

Isi penting:

Berbilang imej latar belakang akan disusun satu di atas yang lain, seperti lapisan dalam Photoshop. Susunan imej latar belakang disenaraikan menentukan imej yang berada di atas. Imej pertama yang disenaraikan adalah pada tahap atas, imej kedua pada tahap kedua, dan imej terakhir pada tahap bawah. Mengambil kod sebelumnya sebagai contoh, bahagian atas tatal (scrollTop.jpg) berada di atas bahagian bawah tatal (scrollBottom.jpg), dan bahagian bawah berada di atas tengah tatal (scrollMiddle.jpg).

Atas ialah kandungan terperinci Bagaimana untuk memasukkan dua imej latar belakang pada masa yang sama dalam css. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!