背景图像仅拉伸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 +).我不想拉伸图像,因为当您在x轴上拉伸图像时它会失去强度,使半透明的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;
}

无论如何,我们的想法是从图像中创建拉伸效果.

JSFiddle.