Arka planda bir CSS görüntüsünü uzatın ve ölçeklendirin - yalnızca CSS ile

Arka plan resmimin tarayıcı görüntü alanı boyutuna bağlı olarak uzamasını ve ölçeklenmesini istiyorum.

Stack Overflow'da bu işi yapan bazı sorular gördüm, örneğin Stretch and scale CSS background gibi. İyi çalışıyor, ancak resmi bir img etiketi ile değil background kullanarak yerleştirmek istiyorum.

Bunun içine bir img etiketi yerleştirilir ve ardından CSS ile img etiketine haraç veririz.

width:100%; height:100%;

Çalışıyor, ancak bu soru biraz eski ve CSS 3'te bir arka plan resmini yeniden boyutlandırmanın oldukça iyi çalışacağını belirtiyor. Ben bunu denedim ilk örnek, ama benim için işe yaramadı.

Bunu background-image bildirimi ile yapmak için iyi bir yöntem var mı?

Community
Edited question 2017ösp26ös12 Mayıs 2017 в 12:26
Programlama
background css
2009ösp51ös15 Temmuz 2009 в 3:51
35 görünümler

Bahsettiğim kod'i kullanarak...

HTML

<div id="background">

</div>

CSS

#background {
    width: 100%; 
    height: 100%; 
    position: fixed; 
    left: 0px; 
    top: 0px; 
    z-index: -1; /* Ensure div tag stays behind content; -999 might work, too. */
}

.stretch {
    width:100%;
    height:100%;
}

Bu, istenen etkiyi yaratır: arka plan değil, yalnızca içerik kayar.

Arka plan görüntüsü, herhangi bir ekran boyutu için tarayıcı görünüm alanına göre yeniden boyutlandırılır. İçerik tarayıcı görünüm alanına sığmadığında ve kullanıcının sayfayı kaydırması gerektiğinde, içerik kaydırılırken arka plan görüntüsü görünüm alanında sabit kalır.

CSS 3 ile bu çok daha kolay olacak gibi görünüyor.

Community
Edited answer 2017ösp26ös12 Mayıs 2017 в 12:26
Yorumlar (5)

Aslında img etiketi ile bir arka plan görüntüsü ile aynı etkiyi elde edebilirsiniz. Sadece z-indeksini diğer her şeyden daha düşük ayarlamanız, position:absolute ayarını yapmanız ve ön plandaki her kutu için şeffaf bir arka plan kullanmanız gerekir.

Yorumlar (4)

Bunu sadece bir resim kullanarak mı başarmak istiyorsunuz? Çünkü aslında iki görüntü kullanarak germe arka plana benzer bir şey yapabilirsiniz. Örneğin PNG görüntüleri.

Bunu daha önce de yaptım ve o kadar da zor değil. Ayrıca, germenin arka planın kalitesine zarar vereceğini düşünüyorum. Ve eğer büyük bir resim eklerseniz yavaş bilgisayarları ve tarayıcıları yavaşlatacaktır.

Peter Mortensen
Edited answer 2012ösp51ös15 Eylül 2012 в 3:51
Yorumlar (3)