Meydan okuma - Renk ve arka plan

Renk ve arka plan özellikleriyle bir hero bölümü kurarsın.

Renk ve arka planı hatırla

Bir hero bölümünde renk ve arka plan birlikte çalışır. color metnin rengini, background-color düz arka planı verir. background-image bir görsel koyar; background kısayolu ise renk, görsel, konum ve tekrarı tek satırda birleştirir.

Üstüne yazı gelen görsellerde rgba() ile yarı saydam bir katman kullanmak metni okunabilir kılar. opacity tüm öğeyi etkilediği için yalnızca arka planı saydamlaştırmak istiyorsan rgba() daha uygundur.

Uygulama Hero bölümünü kur

Bir .hero sınıf seçicisi ekle. background kısayolunu #1a1a2e url("/images/hero.jpg") center/cover no-repeat değeriyle ata. color özelliği #fff, padding özelliği 4rem 2rem, text-align özelliği center olsun.

Örnek çözümü göster

/* hero bölümü */
.hero {
  background: #1a1a2e url("/images/hero.jpg") center/cover no-repeat;
  color: #fff;
  padding: 4rem 2rem;
  text-align: center;
}

Kendini test et

Hangisi geçerli bir background kısayoludur?
```
.hero {
  /* ? */
}
```
- background-color-image: #1a1a2e url("/hero.jpg")
- background: url "/hero.jpg" no-repeat
- background-image: no-repeat center
- background: #1a1a2e url("/hero.jpg") center/cover no-repeat
Cevabı göster

background: #1a1a2e url("/hero.jpg") center/cover no-repeat — Doğru. background kısayolu renk, görsel, konum/boyut ve tekrarı tek satırda birleştirir.

Hero için koyu arka plan rengini tamamla

.hero {
  background-color: ____;
  color: #fff;
  padding: 4rem 2rem;
}

Cevabı göster

.hero {
  background-color: #1a1a2e;
  color: #fff;
  padding: 4rem 2rem;
}

Renk biçimini açıklamasıyla eşleştir

#1a1a2e

Altı basamaklı hex değer
rgb(26, 26, 46)

Üç ışık kanalı sayıyla
hsl(240, 28%, 14%)

Ton, doygunluk, parlaklık
rgba(0, 0, 0, 0.5)

Alpha kanallı yarı saydam

Sıradaki ders: Meydan okuma - Düzen temelleri

Deneyiminizi Geliştiriyoruz

Çerez Tercihleri

Kesinlikle Gerekli Çerezler

Analitik Çerezler