CSS arka planını uzatın ve ölçeklendirin

CSS'de bir arka planın kabını doldurmak için esnemesini veya ölçeklenmesini sağlamanın bir yolu var mı?

Peter Mortensen
Edited question 2012ösp8ös15 Eylül 2012 в 3:08
Programlama
html css
2008ösp21ös22 Aralık 2008 в 10:21
35 görünümler

Şu anda değil. CSS 3]1'de mevcut olacak, ancak çoğu tarayıcıda uygulanması biraz zaman alacak.

Yorumlar (5)

Tek kelimeyle: hayır. Bir resmi uzatmanın tek yolu `` etiketidir. Yaratıcı olmanız gerekecek.

Bu durum, cevabın yazıldığı 2008 yılında da geçerliydi. Günümüzde modern tarayıcılar bu sorunu çözen background-size özelliğini desteklemektedir. IE8'in bunu desteklemediğine dikkat edin.

Vilx-
Edited answer 2013ösp1ös13 Ağustos 2013 в 1:01
Yorumlar (1)

Uzatma ve ölçeklendirmeyi tanımlayın"...

Eğer bir bitmap formatınız varsa, onu uzatmak ve çekmek genellikle (grafiksel olarak konuşursak) harika değildir. Aynı etkinin yanılsamasını vermek için tekrarlanabilir desenler kullanabilirsiniz. Örneğin, sayfanın altına doğru hafifleyen bir gradyanınız varsa, tek piksel genişliğinde ve kabınızla aynı yükseklikte (veya ölçeklendirmeyi hesaba katmak için tercihen daha büyük) bir grafik kullanır ve ardından bunu sayfa boyunca döşersiniz. Aynı şekilde, degrade sayfa boyunca devam ediyorsa, bir piksel yüksekliğinde ve kapsayıcınızdan daha geniş olacak ve sayfa boyunca tekrarlanacaktır.

Normalde, kap büyüdüğünde veya küçüldüğünde kabı doldurmak için esnediği yanılsamasını vermek için görüntüyü kaptan daha büyük yaparsınız. Herhangi bir örtüşme, kabın sınırları dışında görüntülenmez.

Kenarları kavisli bir kutu gibi bir şeye dayanan bir efekt istiyorsanız, kutunuzun sol tarafını kabınızın sol tarafına, kap ne kadar büyük olursa olsun arka planın asla tükenmeyeceği kadar üst üste gelecek şekilde yapıştırırsınız ve ardından kutunun sağ tarafının kavisli kenarları olan bir görüntüsünü katmanlar ve kabın sağına yerleştirirsiniz. Böylece kap küçüldükçe veya büyüdükçe, kavisli kutu efekti de onunla birlikte küçülüyor veya büyüyor gibi görünür - aslında öyle değildir, ancak olan şeyin bu olduğu yanılsamasını verir.

Görüntünün konteynerle birlikte küçülüp büyümesini sağlamak için, görüntünün arka plan olarak işlev görmesini sağlamak için bazı katmanlama hileleri ve konteynerle birlikte yeniden boyutlandırmak için bazı javascript kullanmanız gerekir. Bunu CSS ile yapmanın şu anda bir yolu yok...

Eğer vektör grafikleri kullanıyorsanız, korkarım ki benim uzmanlık alanımın çok dışındasınız.

Yorumlar (2)