Obraz tła rozciągaj tylko oś y, powtarzaj-x

Question

Mam obraz ustawiony jako obraz tła elementu div. Rozmiar DIV się zmienia, a wewnątrz jest obraz, który jest gradientem.

CSS:

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

muszę rozwiązanie cross-przeglądarki, dzięki czemu obraz dopasować wysokość div w jedynej osi y, utrzymując repeat-x. Rozmiar DIV jest dynamicznie zmieniany za pomocą JQuery.

Może to być opcja dla wielu przeglądarek korzystających z JQuery. Nie mam nic przeciwko używaniu skryptów do osiągnięcia tego celu, aby uzyskać wsparcie dla różnych przeglądarek (IE7 +). Nie chcę rozciągać obrazu, ponieważ traci on intensywność po rozciągnięciu obrazu na osi X, przez co półprzezroczysty obraz png jest prawie przezroczysty.

Dzięki.

Answer 1

Miałem również ten problem. W większości przeglądarek jest to łatwe, ale w IE8 i poniżej jest to trudne.

rozwiązanie dla nowoczesnych (niczego nie IE8 i poniżej) przeglądarek:

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

Nie

są jQuery wtyczki, które mogą naśladować background-rozmiar dla IE8 i poniżej, specjalnie backgroundSize.js ale to nie działa, jeśli chcesz powtarzać.

zaczyna Anyways więc mój straszny Hack:

<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> 

upewnij się, że to wystarczająco dużo <img> „s, aby pokryć obszar potrzebne.

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; 
} 

Tak czy inaczej, chodzi o to, aby stworzyć efekt odcinku od obrazów.

JSFiddle.