Arka plan rengi

background-color özelliğini öğrenirsin.

background-color özelliği

background-color bir öğenin zeminini boyar. Metnin rengini color ile, zeminin rengini background-color ile ayarlarsın.

Değer olarak herhangi bir renk biçimi geçerlidir: #1a1a2e, rgb(230, 57, 70), hsl(355, 78%, 56%) ya da transparent. Bir rozet, bir buton ya da bir bölüm zeminini tek satırda renklendirmenin en kestirme yolu budur.

color ile background-color farkı

İki özellik kolay karışır: color metnin rengidir, background-color ise metnin arkasındaki zemindir. Bir paragrafın yazısını lacivert yapmak için color: navy, zeminini boyamak için background-color: #f5f5f5 yazarsın.

Okunabilirlik için iki renk arasında yeterli karşıtlık tut. Koyu zemin üzerine koyu metin okunamaz. Pratik bir çift: krem zemin #fdf6e3 ile koyu lacivert metin #1a1a2e.

Uygulama .badge rozetini biçimlendir

Bir .badge sınıf seçicisi ekle. background-color özelliğini #ff5733, color özelliğini #fff değeriyle ata.

Örnek çözümü göster

/* .badge rozetini biçimlendir */
.badge {
  background-color: #ff5733;
  color: #fff;
}

Kendini test et

Hangi değer background-color özelliği için geçerli DEĞİLDİR?
```
.badge {
  background-color: /* ? */;
}
```
- transparent
- rgb(230, 57, 70)
- hsl(355, 78%, 56%)
- 1px solid #333
Cevabı göster

1px solid #333 — Doğru. 1px solid #333 bir kenarlık değeridir; background-color bir renk değeri ister.

Rozet zemini için geçerli bir hex değer yaz

.badge {
  background-color: ____;
  color: #fff;
}

Cevabı göster

.badge {
  background-color: #ff5733;
  color: #fff;
}

Özelliği etkisine eşle

color

Metnin rengini ayarlar
background-color

Zemin rengini ayarlar
opacity

Tüm öğeyi saydamlaştırır
rgba()

Yalnızca rengi saydamlaştırır

Sıradaki ders: Arka plan görseli

Deneyiminizi Geliştiriyoruz

Çerez Tercihleri

Kesinlikle Gerekli Çerezler

Analitik Çerezler