Bu çalışma kılavuzu, arka plan resimlerinin CSS ile nasıl kullanılacağını gösterecektir. Öyleyse başlayalım!
CSS ile Çoklu Arka Plan Resimleri Nasıl Kullanılır?
CSS “ arka plan ” özelliği, arka plan, arka plan eki, klip, resim, yineleme, orijin, boyut ve konum özelliklerini içeren bir kestirme özelliktir. background özelliği, birden çok görüntünün URL'lerini belirtmek için kullanılabilir. Bu görüntüler daha sonra konumlandırılır ve buna göre ayarlanır.
Bir div öğesinin web sayfası logosu olarak yalnızca bir resim içerdiği, ikincisinin ise üç resim içerdiği bir örneği ele alalım.
Örnek: CSS ile Birden Fazla Arka Plan Resmi Ekleme
HTML'de logo için bir div öğesi ekleyin ve sınıf adını belirtin. Adını koyduk mesela' logo ”. İkinci div, birden çok görüntü kullanıyor, bu yüzden ona “ Birden fazla resim ”. Ancak, sınıf adını tercihlerinize göre belirleyebilirsiniz.
HTML
< div sınıf = 'logo' >< / div >< div sınıf = 'Birden fazla resim' >< / div >
Bir sonraki bölümde, CSS arka plan özelliğini kullanarak görüntüleri ayarlayacağız.
Stil 'logo' div
.logo {Genişlik : 100% ;
yükseklik : 50 piksel ;
dolgu malzemesi : 5 piksel ;
marj : 5 piksel ;
arka plan boyutu : 100 piksel ;
arka plan tekrarı : tekrarsız ;
arka plan görüntüsü : url ( resimler/linux-logo.png ) ;
}
“ sınıfına sahip div öğesi logo ” aşağıdaki özelliklerle uygulanır:
- “ Genişlik ” özelliği, elemanın genişliğini “ olarak ayarlamak için kullanılır. 100% ”.
- “ yükseklik ” özelliği, elemanın yüksekliğini “ olarak ayarlamak için kullanılır. 50 piksel ”.
- “ dolgu malzemesi ” özelliği, “ ayarlamak için kullanılır. 5 piksel ” öğenin belirtilen içeriğinin etrafındaki boşluk.
- “ marj ” özelliği, “ ayarlamak için kullanılır. 5 piksel ” öğesinin etrafındaki boşluk.
- “ arka plan boyutu ” özelliği, öğenin arka plan görsel boyutunu “ olarak ayarlar. 100 piksel ”.
- “ arka plan tekrarı 'değeri ile' tekrarsız ” arka planı yalnızca bir kez görüntüler.
- “ arka plan görüntüsü ” özelliği, resmin URL'sini belirtmek için kullanılır.
Stil 'birden çok resim' div
.Birden fazla resim {Genişlik : %90 ;
yükseklik : 45vh ;
marj : 1 piksel Oto ;
dolgu malzemesi : 20 piksel ;
arka plan boyutu : 150 piksel ;
arka plan rengi : rgb ( 157 , 154 , 151 ) ;
arka plan görüntüsü : url ( resimler/ofis.png ) , url ( resimler/html.png ) , url ( resimler/laptop.png ) ;
arka plan tekrarı : tekrarsız , tekrarsız , tekrarsız ;
arka plan pozisyonu : sol , merkez , Sağ ;
}
Şimdi diğer kapsayıcıyı aşağıdaki gibi biçimlendirin:
- “ arka plan rengi ” özelliği, öğenin arka plan rengini belirtir.
- “ arka plan görüntüsü ” özelliği, birden fazla resim URL'si belirtir.
- “ arka plan tekrarı ” özelliği, background-image özelliğinde belirtilen bir dizideki görüntüler için değerleri ayarlar. Her iki görüntü de tekrarlanmayacak şekilde ayarlanmıştır, bu da tarayıcıda yalnızca bir kez gösterilecekleri anlamına gelir.
- “ arka plan pozisyonu ”, background-image özelliği tarafından belirtilen görüntülerin sırasındaki görüntü konumunu ayarlar. İlk resim sol tarafa, ikincisi ortaya ve üçüncüsü sağ tarafa yerleştirilecektir.
Yukarıda verilen kodu sağladığınızda, tarayıcıdaki sonuç şöyle görünecektir:
Bu şekilde birden çok görüntünün konumunu CSS ile ayarlayabiliriz.
Çözüm
Uygulamayı eğlenceli ve etkileşimli hale getirmek için geliştiriciler farklı görseller ve renkler kullanır. Arka plan konumu, arka plan tekrarı, arka plan boyutu ve daha fazlası gibi CSS arka plan özelliklerine sahip birden fazla resim ayarlayabiliriz. Bu kılavuz, birden çok arka plan görüntüsünün kullanımını CSS örnekleriyle göstermiştir.