Background Color

Latar warna adalah dekorasi termurah yang dapat kita tambahkan ke halaman: satu deklarasi background-color langsung membedakan kartu, tombol, dan panel dari latar halaman. Properti ini bekerja pada semua jenis elemen, dari blok besar hingga span pendek di dalam paragraf. Di balik kesederhanaannya ada beberapa aturan yang sering mengejutkan pemula: warna latar tidak diwariskan, nilai awalnya transparan, dan luas area catnya dapat diatur. Chapter ini membahas ketiganya, ditutup demo yang nilai computed-nya diperiksa otomatis.

Mengisi Latar Elemen #

background-color menerima nilai warna dalam notasi apa pun yang telah kita pelajari pada Chapter Color Syntax . Cat menutupi area dari tepi padding hingga tepi border secara bawaan — artinya area di bawah border yang transparan juga ikut terisi. Contoh berikut memberi latar pada sebuah kartu dan tombol:

.kartu {
  background-color: rgb(14 165 233);
  color: rgb(255 255 255);
  padding: 16px;
  border-radius: 8px;
}
.tombol {
  background-color: hsl(0 84% 60%);
  color: rgb(255 255 255);
  border: none;
  padding: 10px 18px;
  border-radius: 6px;
}

Hasil di Browser:

Kartu tampil dengan latar biru langit dan teks putih;
computed background-color: rgb(14, 165, 233).
Tombol tampil merah; computed background-color: rgb(239, 67, 67)
dari deklarasi hsl(0 84% 60%).

1. Baris 2 (background-color: rgb(14 165 233);): kartu diberi latar biru langit menggunakan sintaks modern; computed-nya dilaporkan sebagai rgb(14, 165, 233).
2. Baris 3 (color: rgb(255 255 255);): teks di atas latar pekat harus berwarna terang agar kontrasnya memadai — topik yang kita bedah tuntas pada Chapter Color Contrast .
3. Baris 8 (background-color: hsl(0 84% 60%);): tombol memakai notasi hsl(); browser yang menghitung konversi ke rgb, bukan kita.

Deklarasi yang sama bekerja pada elemen inline seperti <mark> atau <span>: cat mengikuti kotak inline di tengah baris teks tanpa menggeser aliran dokumen. Perlu diingat pula bahwa cat mencapai tepi luar border — bila border dibuat semi transparan, warna latar di bawahnya ikut terlihat bercampur di area border tersebut.

Nilai Awal Transparent dan Sifat Non-Inherited #

Elemen tanpa deklarasi background-color tetap memperlihatkan apa yang berada di belakangnya karena nilai awal properti ini adalah transparent — dilaporkan browser sebagai rgba(0, 0, 0, 0). Berbeda dengan color atau font-size, warna latar tidak termasuk properti yang diwariskan (inheritance ): anak elemen tidak ikut berlatar biru hanya karena induknya biru. Bila sebuah panel anak harus tampak menyatu dengan induknya, kita menyatakan warna yang sama secara eksplisit atau membiarkannya transparan.

Sifat non-inherited ini menjelaskan pola yang wajar di kode nyata: warna latar dinyatakan pada wadah terluar, lalu setiap kartu dan panel di dalamnya memilih latarnya sendiri. Kita tidak perlu “membatalkan” pewarisan dengan menimpa nilai — cukup mendeklarasikan latar pada elemen yang memang membutuhkannya.

Mengatur Luas Cat dengan background-clip #

Properti background-clip menentukan batas area yang dicat oleh latar:

Contoh berikut membandingkan tiga nilai pertama pada kotak bergaris tepi putus-putus, lalu memakai text pada judul besar:

<div class="klip klip-border">border-box</div>
<div class="klip klip-padding">padding-box</div>
<div class="klip klip-content">content-box</div>
<h2 class="judul-klip">Teks dari latar</h2>

.klip {
  background-color: rgb(14 165 233);
  border: 6px dashed rgb(2 132 199);
  padding: 14px;
  margin-bottom: 12px;
}
.klip-padding  { background-clip: padding-box; }
.klip-content  { background-clip: content-box; }
.judul-klip {
  background-color: rgb(239 68 68);
  color: transparent;
  background-clip: text;
  font-size: 48px;
  font-weight: 800;
}

Mari kita telaah bagian yang baru:

1. Baris 2–4 (.klip): ketiga kotak berbagi latar biru, border putus-putus, dan padding 14px sehingga perbedaan area cat terlihat jelas.
2. Baris 7 (.klip-padding): cat berhenti di tepi padding; pita border tetap terlihat sebagai bingkai kosong.
3. Baris 8 (.klip-content): cat menyusut lagi hingga hanya menutup area konten di dalam padding.
4. Baris 10–15 (.judul-klip): latar merah hanya mengisi bentuk huruf. Triknya ada pada color: transparent — warna teks dikosongkan agar cat latar yang menempel pada glyph yang terlihat.

Hasil di Browser:

Tiga kotak tampil dengan border putus-putus: kotak pertama penuh
berwarna (background-clip: border-box), kotak kedua menyisakan
cincin border tak berwarna (padding-box), dan kotak ketiga menyisakan
cincin padding juga (content-box). Judul besar "Teks dari latar"
tampil dengan huruf berwarna merah (background-clip: text).
Nilai computed background-clip masing-masing terbaca border-box,
padding-box, content-box, dan text.

Demo chapter ini memuat tujuh penanda data-expected: warna kartu dan tombol, panel tanpa deklarasi (rgba(0, 0, 0, 0)), serta keempat nilai background-clip di atas.