css - 背景图像仅拉伸(stretch) y 轴，保持重复 x

Question

我有一个图像设置为 div 的背景图像。 DIV 大小在变化，它们内部是渐变图像。

CSS:

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

我需要一个跨浏览器的解决方案来使图像仅在 y 轴上适合 div 的高度，同时保持 repeat-x。 DIV 正在通过 JQuery 动态调整大小。

它们可能是使用 JQuery 的跨浏览器选项。我不介意使用脚本来实现这一点以获得跨浏览器支持 (IE7+)。我不想拉伸(stretch)图像，因为当您在 x 轴上拉伸(stretch)图像时它会失去强度，使半透明的 png 图像几乎透明。

谢谢。

Answer 1

我也遇到过这个问题。这在大多数浏览器中都很容易，但在 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;
}

无论如何，我们的想法是从图像创建拉伸(stretch)效果。

JSFiddle .