Properti background-color mewarnai latar elemen, yaitu kotak di belakang teksnya. Bedanya dengan color: kalau color warna tinta, background-color warna kertasnya.
🧪 Tebakan cepat: sebuah paragraf punya
background-color: transparentdan ada di dalam kotak berlatar biru. Latar paragrafnya kelihatan warna apa? Tebak dulu, jawabannya ada di bagian "transparentdan shorthandbackground".
Mewarnai latar
h1 {
background-color: #12d994;
color: #000000;
padding: 8px;
}
h1adalah selector: aturannya buat semua<h1>.background-color: #12d994;adalah deklarasi: propertibackground-color, titik dua, nilainya hijau dalam kode hex, lalu titik koma.color: #000000;membuat teksnya hitam.padding: 8px;memberi ruang 8 piksel antara teks dan tepi latarnya, biar warnanya gak mepet ke huruf. Padding dibahas lengkap di pelajarannya sendiri.
Hasilnya, teks hitam di atas latar hijau yang membentang selebar halaman, karena <h1> memang mengisi satu baris penuh. Nilainya ditulis sama kayak color: nama (yellow), hex, rgb(), atau hsl().
Satu aturan boleh berisi banyak deklarasi. Kalau sudah ada h1 { color: black; }, tambahkan background-color di dalam kurung kurawal yang sama, sebelum }.
Teks dan latar harus kontras
Teks hitam di latar gelap gak kebaca. Kalau latarnya gelap, terangkan teksnya, misalnya color: white;. Patokan aksesibilitas (WCAG) minta perbandingan kontras minimal 4.5:1 buat teks biasa, dan DevTools browser bisa menghitungnya waktu kamu memilih warna.
transparent dan shorthand background
background-color: transparentadalah nilai bawaan: latarnya tembus pandang, jadi yang kelihatan latar induknya. Jawaban tebakan: biru.backgroundadalah shorthand, satu properti yang mengatur semua bagian latar sekaligus: warna, gambar, posisi, ukuran.background: blue;juga mewarnai latar, tapi bagian yang gak kamu sebut kembali ke nilai awal. Jadi kalau elemennya punyabackground-image(gambar latar),background: red;yang ditulis sesudahnya ikut menghapus gambar itu. Cuma mau ganti warna? Pakaibackground-color.
⚠️ Jebakan yang sering ketemu
- Pakai
colorbuat latar.color: yellow;mewarnai hurufnya, bukan latarnya. - Nama properti salah tulis.
background color(pakai spasi) ataubackground-colourdiabaikan browser. Tulisbackground-color, dengan tanda hubung. - Ganti latar, lupa teksnya. Latar gelap dengan teks hitam bikin tulisannya hilang.
TL;DR: background-color mewarnai kotak di belakang teks, color mewarnai hurufnya: h1 { background-color: yellow; }. Format warnanya sama dengan color. Jaga kontras teks dan latar. transparent (bawaan) memperlihatkan latar induknya. Shorthand background mengatur ulang semua bagian latar, termasuk menghapus gambar, jadi buat ganti warna saja pakai background-color.
