Panduan latar belakang CSS

Tautan asli: Latar Belakang Dalam CSS: Semua yang Perlu Anda Ketahui
Tautan terjemahan: Panduan latar belakang CSS

Harap simpan hak cipta dan tautan saat mencetak ulang

Background merupakan bagian penting dari CSS dan salah satu pengetahuan dasar CSS yang perlu Anda ketahui. Artikel ini akan membahas penggunaan dasar latar belakang css (background), termasuk atribut seperti background-attachment, dll., dan juga memperkenalkan beberapa teknik umum tentang latar belakang (background), serta latar belakang (background) di css3 (termasuk 4 baru properti latar belakang).

Latar belakang di css2

Ringkasan

Ada 5 properti latar belakang utama di CSS2, yaitu:

• background-color: Menentukan warna untuk mengisi latar belakang.
• background-image: Gambar referensi sebagai latar belakang.
• background-position: Menentukan posisi gambar latar belakang elemen.
• background-repeat: Menentukan apakah akan mengulang gambar latar belakang.
• lampiran-latar belakang: Menentukan apakah gambar latar belakang bergulir bersama halaman.

Semua properti ini dapat digabungkan menjadi satu properti yang disingkat: latar belakang. Satu hal penting yang perlu diperhatikan adalah bahwa latar belakang menempati seluruh area konten elemen, termasuk padding dan border, namun tidak termasuk margin elemen. Ini berfungsi dengan baik di Firefox, Safari, Opera dan IE8, tetapi di IE6 dan IE7, latar belakang tidak menyertakan batas.

Properti dasar

warna latar belakang

Properti background-color mengisi latar belakang dengan warna solid. Ada banyak cara untuk menentukan warna ini, dan semua metode berikut memberikan hasil yang sama.

warna latar belakang: biru;
warna latar belakang: rgb(0, 0, 255);
warna latar belakang: #0000ff;

Warna latar belakang juga dapat diatur menjadi transparan, yang membuat elemen di bawahnya terlihat.

gambar latar belakang

Atribut background-image memungkinkan menentukan gambar yang akan ditampilkan di latar belakang. Dapat digunakan bersamaan dengan warna latar, sehingga jika gambar tidak terulang, area yang tidak tercakup dalam gambar akan terisi dengan warna latar belakang. Kodenya sangat sederhana, ingatlah bahwa pathnya relatif terhadap style sheet, jadi pada kode berikut, gambar dan style sheet berada di direktori yang sama.

gambar latar belakang: url(gambar.jpg);

Namun jika gambar berada dalam subdirektori bernama images, seharusnya:

gambar latar belakang: url(gambar/gambar.jpg);

Tangbantomatoes: Gunakan ../ untuk menunjukkan direktori tingkat atas, seperti background-image: url(../images/image.jpg); menunjukkan bahwa gambar tersebut terletak di subdirektori gambar di direktori tingkat atas lembar gaya. Agak berbelit-belit, tapi semua orang pasti sudah mengetahuinya, jadi saya tidak akan menjelaskannya lebih jauh. Pengamatan Front-end Semua Hak Dilindungi Undang-Undang, harap simpan tautannya saat mencetak ulang.