只有背景图像拉伸y轴，保持重复-X(Background image stretch y-axis

我有设置一个div的背景图像的图像。该DIV尺寸在不断变化，其内部是这是一个梯度的图象。

CSS：

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

我需要用于使图像适应仅在y轴的div高度，保持重复-X跨浏览器的解决方案。所述DIV正在通过JQuery动态调整大小。

他们可能是使用JQuery一个跨浏览器选项。我不介意使用脚本来实现，为了获得跨浏览器支持（IE7 +）。我不想舒展的形象，因为当你舒展在x轴上的形象失去了强度，使得半透明的PNG图像几乎是透明的。

谢谢。

我也有这个问题。这很容易在大多数浏览器，但IE8及以下它的棘手。

解决方案为现代（什么也没IE8及以下）浏览器：

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

有jQuery插件，可以模仿背景大小IE8及以下，特别是backgroundSize.js但如果你想重复这是行不通的。

反正就这样开始了我的可怕黑客：

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

确保包括足够<img>的覆盖所需的区域。

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

不管怎么说，这个想法是创建图像拉伸的效果。

的jsfiddle 。