CSS
Arka plan kısayolu
background kısayolu ile tüm arka plan özelliklerini tek satırda yazarsın.
background kısayolu
background kısayolu birden çok arka plan özelliğini tek satırda toplar. background: #1a1a2e url("/images/hero.jpg") no-repeat center top; yazınca renk, görsel, yineleme ve konumu tek bildirimde verirsin.
Kısayol kullanırken yazmadığın özellikler varsayılan değerlerine sıfırlanır. Bu yüzden önce background-color verip sonra background yazarsan, renk kaybolabilir. Kısayolu ya tek başına ya da en son kullanmak daha güvenlidir.
background-size
background-size görselin zemin içindeki boyutunu ayarlar. İki değerle 200px 100px gibi piksel verirsin; ya da anahtar sözcük kullanırsın.
cover görseli kutuyu tam kaplayacak biçimde büyütür, en-boy oranını korur; fazla taşan kısım kesilir. contain ise görselin tamamını gösterir, kutuda boşluk kalabilir. Bir kahraman bölümü için çoğunlukla cover tercih edilir.
background-attachment
background-attachment görselin sayfa kaydırılırken nasıl davranacağını belirler. Varsayılan scroll değeridir; görsel öğeyle birlikte kayar.
fixed değerinde görsel pencereye sabitlenir; sayfa kayarken görsel durur, parallax benzeri bir etki yaratır. Bir kahraman bölümünde fixed kullanırsan görselin sabit durduğu izlenimi oluşur. local ise öğenin kendi içeriğiyle birlikte kayar.
Uygulama .banner için arka plan kur
Bir .banner sınıf seçicisi ekle. background kısayolunu #1a1a2e url("/images/banner.jpg") no-repeat center top değeriyle, background-size özelliğini cover, background-attachment özelliğini fixed değeriyle ata.
Örnek çözümü göster
/* .banner için arka plan kur */
.banner {
background: #1a1a2e url("/images/banner.jpg") no-repeat center top;
background-size: cover;
background-attachment: fixed;
}
Kendini test et
-
Hangisi geçerli bir background kısayoludur?
- background-image: url("/x.jpg")
- background-color: #1a1a2e
- background: #1a1a2e url("/x.jpg") no-repeat center top
- background-position: center top
Cevabı göster
background: #1a1a2e url("/x.jpg") no-repeat center top — Doğru. background kısayolu tek bildirimde renk, görsel, yineleme ve konumu bir arada verebilir.
-
Hero görselinin kutuyu doldurması için boyut değerini yaz
.hero {
background: url("/images/hero.jpg") no-repeat center top;
background-size: ____;
}
Cevabı göster
.hero {
background: url("/images/hero.jpg") no-repeat center top;
background-size: cover;
}
-
Boyut değerini etkisine eşle
- cover
- Kutuyu doldurur, taşan kesilir
- contain
- Tüm görseli gösterir, boşluk kalır
- 200px 100px
- Piksel ile iki boyut verir
- auto
- Orijinal boyutu korur
Sıradaki ders: Özet - Hero bölümü
