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