Panduan kajian ini akan menunjukkan cara menggunakan imej latar belakang dengan CSS. Jadi, mari kita mulakan!
Bagaimana untuk Menggunakan Pelbagai Imej Latar Belakang Dengan CSS?
CSS ' latar belakang ” harta ialah sifat trengkas yang mengandungi latar belakang, lampiran latar belakang, klip, imej, ulangan, asal, saiz dan sifat kedudukan. Sifat latar belakang boleh digunakan untuk menentukan URL berbilang imej. Imej-imej tersebut kemudiannya diletakkan dan ditetapkan dengan sewajarnya.
Mari kita ambil contoh di mana satu elemen div mengandungi hanya satu imej sebagai logo halaman web manakala yang kedua mengandungi tiga imej.
Contoh: Menambah Berbilang Imej Latar Belakang Dengan CSS
Dalam HTML, tambahkan elemen div untuk logo dan nyatakan nama kelas. Sebagai contoh, kami menamakannya ' logo ”. Div kedua menggunakan berbilang imej, jadi kami menamakannya ' berbilang imej ”. Walau bagaimanapun, anda boleh menentukan nama kelas mengikut keutamaan anda.
HTML
< div kelas = 'logo' >< / div >< div kelas = 'berbilang imej' >< / div >
Dalam bahagian seterusnya, kami akan melaraskan imej menggunakan sifat latar belakang CSS.
Gaya 'logo' div
.logo {lebar : 100% ;
ketinggian : 50px ;
padding : 5px ;
margin : 5px ;
saiz latar belakang : 100px ;
latar belakang-ulang : tidak berulang ;
imej latar belakang : url ( images/linux-logo.png ) ;
}
Elemen div dengan kelas “ logo ” digunakan dengan sifat berikut:
- “ lebar sifat ' digunakan untuk menetapkan lebar elemen kepada ' 100% ”.
- “ ketinggian harta ” digunakan untuk menetapkan ketinggian elemen kepada “ 50px ”.
- “ padding sifat ” digunakan untuk menetapkan “ 5px ” ruang di sekeliling kandungan unsur yang ditentukan.
- “ margin harta ” digunakan untuk menetapkan “ 5px ” ruang di sekeliling elemen.
- “ saiz latar belakang harta ” menetapkan saiz imej latar belakang elemen sebagai “ 100px ”.
- “ latar belakang-ulang 'dengan nilai' tidak berulang ” memaparkan latar belakang sekali sahaja.
- “ imej latar belakang sifat ” digunakan untuk menentukan URL imej.
Gaya div 'berbilang imej'.
.berbilang-imej {lebar : 90% ;
ketinggian : 45vh ;
margin : 1px auto ;
padding : 20px ;
saiz latar belakang : 150px ;
warna latar belakang : rgb ( 157 , 154 , 151 ) ;
imej latar belakang : url ( imej/pejabat.png ) , url ( images/html.png ) , url ( images/laptop.png ) ;
latar belakang-ulang : tidak berulang , tidak berulang , tidak berulang ;
kedudukan latar belakang : dibiarkan , pusat , betul ;
}
Sekarang, gayakan bekas lain seperti berikut:
- “ warna latar belakang sifat ” menentukan warna latar belakang elemen.
- “ imej latar belakang sifat ” menentukan berbilang URL imej.
- “ latar belakang-ulang sifat ” menetapkan nilai untuk imej dalam urutan imej yang ditentukan dalam sifat imej latar belakang. Kedua-dua imej ditetapkan sebagai tidak berulang bermakna ia akan dipaparkan pada penyemak imbas sekali sahaja.
- “ kedudukan latar belakang ” melaraskan kedudukan imej dalam jujukan imej yang ditentukan oleh sifat imej latar belakang. Imej pertama akan ditetapkan di sebelah kiri, yang kedua di tengah dan yang ketiga akan diletakkan di sebelah kanan.
Dengan memberikan kod yang diberikan di atas, hasil dalam penyemak imbas akan kelihatan seperti ini:
Dengan cara ini, kita boleh melaraskan kedudukan berbilang imej dengan CSS.
Kesimpulan
Untuk menjadikan aplikasi itu menghiburkan dan interaktif, pembangun menggunakan imej dan warna yang berbeza. Kami boleh menetapkan berbilang imej dengan sifat latar belakang CSS, seperti kedudukan latar belakang, ulangan latar belakang, saiz latar belakang dan banyak lagi. Manual ini telah menunjukkan penggunaan berbilang imej latar belakang dengan contoh CSS.