Arka plan resmi sadece y eksenini uzat, tekrarla x-

Question

Bir div görüntüsünün arka plan resmi olarak ayarlanmış bir resmim var. DIV boyutu değişiyor ve onların içinde bir degrade olan görüntü var.

CSS:

#scroller_shadow{ 
    background-image:url(../img/ui/shadow.png); 
    background-repeat:repeat-x; 
    background-position:top; 
} 

Ben, görüntü sadece y-ekseninde div yüksekliğini uygun hale tekrarı-x tutmak için bir çapraz tarayıcı çözüm gerekir. DIV, JQuery aracılığıyla dinamik olarak yeniden boyutlandırılıyor. JQuery kullanarak bir çapraz tarayıcı seçeneği olabilir. Çapraz tarayıcı desteği (IE7 +) elde etmek için bunu gerçekleştirmek için komut dosyaları kullanmıyorum. Görüntüyü uzatmak istemiyorum çünkü görüntüyü x ekseninde gerdiğinizde yoğunluğu yitiriyor ve yarı saydam bir görüntüyü neredeyse şeffaf hale getiriyor.

Teşekkürler.

Answer 1

Bu problemi de yaşadım. Çoğu tarayıcıda kolaydır, ancak IE8 ve aşağısı zor.

Modern için Çözeltisi (bir şey değil IE8 ve altı) tarayıcılar:

#scroller_shadow { 
    background: url(../img/ui/shadow.png) center repeat-x; 
    background-size: auto 100%; 
} 

var IE8 için arka plan boyutunda taklit ve altında özellikle backgroundSize.js ama çalışmıyor eğer istersen olabilir jQuery eklentileri vardır tekrarlamak için.

<div id="scroller_shadow"> 
    <div id="scroller_shadow_tile"> 
     <img src="./img/ui/shadow.png" alt="" > 
     <img src="./img/ui/shadow.png" alt="" > 
     <img src="./img/ui/shadow.png" alt="" > 
     ... 
     <img src="./img/ui/shadow.png" alt="" > 
    </div> 
</div> 

gerekli bölgeyi kapsayacak kadar <img> 's katmak emin olun:

Neyse böylece benim korkunç kesmek başlar.

CSS:

#scroller_shadow { 
    width: 500px; /* whatever your width is */ 
    height: 100px; /* whatever your height is */ 
    overflow: hidden; 
} 

#scroller_shadow_tile { 
    /* Something sufficiently large, you only to make it unreasonably wide if the width of the parent is dynamic. */ 
    width: 9999px; 
    height: 100%; 
} 

#scroller_shadow_tile img { 
    height: 100%; 
    float: left; 
    width: auto; 
} 

Neyse, fikri görüntülerden streç etkisi yaratmaktır.

JSFiddle.