giriiş
Arka plan görselinin boyutunu arka plan boyutu özelliği yardımıyla belirleyebiliriz. Görüntüyü sola, uzatılmış ve mevcut alana sığacak şekilde yapabiliriz. arka plan boyutu özelliğinin uygulanmasına yönelik pek çok sözdizimi vardır. Arka plan boyutu özelliğinin özelliğini değerler ve birim değerler yardımıyla ayarlayabiliriz.
Birim değerlerinde arka plan boyutu özelliğini yüzde veya piksel şeklinde tanımlayabiliriz. Bunu küresel değer yardımıyla da tanımlayabiliriz. Aşağıdaki pasajın yardımıyla bunu küresel değerin yardımıyla uygulayabiliriz.
c'de bir işaretçinin referansı nasıl kaldırılır
.card-hero inherit
Konuyu kısaca anlayalım.
Anahtar kelime değerleri
Anahtar kelime değerini cover ve include yardımıyla kullanabiliriz. Bu anahtar kelime değerlerinin yardımıyla arka plan boyutunu değiştirebiliriz.
1. Kapak:
Cover anahtar kelimesi yardımıyla arka plan boyutunu ayarlayabiliriz. Arka plan boyutunu kapak olarak tanımlarsak görsel hiç boşluk bırakmadan konteynere sığacaktır. Ayrıca görüntüyü ekrana sığacak şekilde geliştirecektir.
Aşağıdaki örnek yardımıyla bunu anlayalım.
Örnek 1:
Kod:
Document body { margin: 0; padding: 0; font-family: Arial, sans-serif; background-color: #f0f0f0; } .background-container { position: relative; width: 100vw; height: 100vh; background-image: url('https://e0.pxfuel.com/wallpapers/163/906/desktop-wallpaper-beautiful-nature-with-girl-beautiful-girl-with-nature-and-moon-high-resolution-beautiful.webp'); background-size: cover; background-position: center; text-align: center; color: white; } .background-container h1 { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); font-size: 2.5rem; text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.7); } <p>Where every step unveils a new wonder.</p> Çıktı
push için git komutları
Açıklama:
Yukarıdaki kodda, arka plan resmi özelliği kullanılarak üç arka plan resmi birleştirilir. arka plan boyutu özelliği, her arka plan görüntüsünün boyutlarını belirtir: ilk görüntü için %30 genişlik, ikinci görüntü için %40 genişlik ve üçüncü görüntü için kapak. Dengeli bir kompozisyon oluşturmak amacıyla arka plan konumu özelliği her görüntü için farklı şekilde ayarlanır.