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