Selama proses pengembangan front-end, gambar latar belakang sering kali ditambahkan ke halaman HTML demi keindahan halaman. Lalu bagaimana cara menggunakan css untuk mengatur gambar sebagai background di html? Artikel ini akan memperkenalkan kepada Anda cara mengatur gambar latar belakang di CSS. Teman-teman yang membutuhkan dapat merujuk dan mempelajarinya.
1. Ikhtisar latar belakang
CSS dapat menambahkan warna latar belakang dan gambar latar belakang, serta pengaturan gambar.
Atribut css background adalah properti yang secara khusus mengatur latar belakang. Anda dapat mengatur warna latar belakang atau gambar latar belakang.
2. Atribut
1. warna latar belakang
(1) Definisi dan penggunaan: Atribut background-color mengatur warna latar belakang elemen
(2) Rentang latar belakang elemen
Properti background-color menetapkan warna solid untuk elemen. Warna ini mengisi konten elemen, padding, dan area batas, meluas ke batas luar batas elemen (tapi bukan margin). Jika batasnya memiliki bagian transparan (seperti batas titik), warna latar belakang akan terlihat melalui bagian transparan tersebut.
(3) nilai transparan
Meskipun dalam banyak kasus, penggunaan transparan tidak diperlukan. Namun, jika Anda tidak ingin suatu elemen memiliki warna latar belakang, dan Anda tidak ingin pengaturan warna browser pengguna memengaruhi desain Anda, maka pengaturan nilai transparan tetap diperlukan.
Gunakan warna latar belakang untuk mengatur warna latar belakang suatu elemen:
<!DOCTYPEhtml><html><head><title>Latar belakang CSS</title><style>#bg{color:white;background-color:blue;margin:20px;/*Setel margin luar menjadi 20px*/padding : 20px;/*Setel margin bagian dalam menjadi 20px*/border:10pxdottedYellow;/*Tetapkan batas titik-titik kuning selebar 10px*/}</style></head><body><pid=bg>atribut warna latar< /p></body></html>Hasil tampilannya adalah sebagai berikut:
Dari hasil yang dijalankan, kita dapat melihat bahwa atribut background-color dapat mengatur latar belakang warna solid untuk elemen tersebut. Warna ini akan mengisi konten, padding, dan area batas elemen (dapat juga dipahami sebagai batas dan semua area di dalamnya). Untuk elemen Area di luar batas (margin) tidak berpengaruh.
2. background-image mengatur gambar latar belakang
gambar latar belakang:url(imgs/main_bg.jpg),
Jika properti diatur di file css dan gambar tidak ada di folder css, tambahkan path di depannya untuk kembali ke folder sebelumnya.../
(1) Atribut background-image menyetel gambar latar belakang untuk elemen.
(2) Latar belakang suatu elemen menempati seluruh ukuran elemen, termasuk padding dan batas, namun tidak margin.
(3) Secara default, gambar latar belakang terletak di sudut kiri atas elemen dan berulang secara horizontal dan vertikal.
(4) url('URL'): Jalur yang menunjuk ke gambar.
Tip: Atur warna latar belakang yang tersedia agar halaman terlihat bagus jika gambar latar belakang tidak tersedia.
3. pengulangan latar belakang gambar latar belakang
Secara default, gambar latar belakang akan menutupi seluruh halaman. Jika gambar latar belakang tidak cukup besar untuk menutupi seluruh halaman, gambar latar belakang akan terulang pada sumbu absis dan ordinat;
4. background-size mengatur ukuran gambar latar belakang
5. background-position mengatur posisi gambar latar belakang
Nilai default: kiri, bawah, kanan, atas, tengah (tengah)
Catatan: Anda juga dapat menggunakan nilai numerik atau persentase seperti background-position: 10px 10px mewakili jarak koordinat horizontal dan vertikal dari batas kiri dan atas;
6. Apakah lampiran latar belakang disetel ke tetap?
7.latar belakang-asal
background-origin adalah properti baru di CSS3. Saat menggunakan atribut background-position untuk mengatur posisi gambar latar belakang, posisi sudut kiri atas elemen dihitung secara default. Anda juga dapat menggunakan atribut background-origin untuk mengatur posisi relatif atribut background-position untuk memposisikan gambar latar belakang. Nilai opsional dari atribut background-origin adalah sebagai berikut:
8. klip latar belakang
klip latar belakang adalah atribut baru di CSS3, yang melaluinya area tampilan gambar latar belakang dapat diatur. Nilai opsional untuk atribut background-clip adalah sebagai berikut:
Catatan: Transparansi latar belakang berarti latar belakang kotak tembus cahaya, dan konten di dalam kotak tidak terpengaruh.
9. latar belakang
background adalah singkatan dari atribut background. Melaluinya, Anda tidak hanya dapat menyetel atribut latar belakang tertentu untuk suatu elemen, tetapi juga menyetel beberapa atau semua atribut latar belakang secara bersamaan. Tidak ada urutan tetap saat mengatur beberapa properti latar belakang, namun disarankan untuk menggunakan urutan berikut:
warna-latar||gambar-latar belakang||posisi-latar belakang[/ukuran latar belakang]?||ulang-latar belakang||lampiran-latar belakang||asal-latar belakang||klip-latar belakang
Catatan: Perbedaan antara atribut gambar latar dan img:
(1) Elemen img termasuk dalam konsep HTML, dan gambar latar belakang termasuk dalam konsep css.
(2) Jika gambar milik konten web, elemen img harus digunakan
(3) Apabila gambar hanya digunakan untuk mempercantik halaman, maka harus digunakan gambar latar belakang