Chỉ kéo dài hình ảnh nền trục y, giữ lại-x

Question

Tôi có một hình ảnh được đặt làm hình nền của một div. Kích thước DIV đang thay đổi và bên trong chúng là hình ảnh có độ dốc.

CSS:

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

Tôi cần một giải pháp qua trình duyệt để làm hình ảnh phù hợp với chiều cao của div trong chỉ trục y, giữ repeat-x. DIV đang được thay đổi kích thước động thông qua JQuery.

Có thể là tùy chọn trình duyệt chéo bằng JQuery. Tôi không quan tâm đến việc sử dụng các tập lệnh để đạt được điều đó để nhận hỗ trợ qua trình duyệt (IE7 +). Tôi không muốn kéo dài hình ảnh vì nó mất cường độ khi bạn kéo giãn hình ảnh trên trục x, làm cho hình ảnh png nửa trong suốt gần như trong suốt.

Cảm ơn.

Answer 1

Tôi cũng gặp sự cố này. Thật dễ dàng trong hầu hết các trình duyệt, nhưng IE8 và dưới đây thì rất khó.

Giải pháp cho hiện đại (bất cứ điều gì không IE8 và dưới) các trình duyệt:

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

Có jQuery plugin có thể bắt chước background-kích thước cho IE8 và dưới đây, đặc biệt backgroundSize.js nhưng nó không hoạt động nếu bạn muốn nó lặp lại.

Anyways do đó bắt đầu Hack khủng khiếp của tôi:

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

Hãy chắc chắn bao gồm đủ <img> 's để trang trải các khu vực cần thiết.

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

Anyways, ý tưởng là để tạo hiệu ứng căng từ các hình ảnh.

JSFiddle.