背景图片仅在y轴方向拉伸，保持repeat-x

Question

元素的背景图像是一个图形渐变，随着

元素大小的改变而改变。

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图像几乎透明。

谢谢。

- Liron Harel

Answer 1

我也遇到过这个问题。在大多数浏览器中很容易解决，但在IE8及以下版本中有些棘手。

现代浏览器（任何不是IE8及以下版本的浏览器）的解决方案：

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

有一些jQuery插件可以模拟IE8及以下版本的背景大小，特别是backgroundSize.js，但如果您想要重复，则无法正常工作。

无论如何，这就是我可怕的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>

请确保包含足够的<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。

- Belladonna

---

我不得不将其更改为 background: url(../img/ui/shadow.png) center repeat-x fixed 才能使其正常工作。 - snarf

在Safari中似乎background-size: auto 100%;不起作用 :( - khiav reoy

Answer 2

background-position: left top;
background-repeat-y: repeat;
background-size: 100%;

- kostia7alania

---

你的意思是使用 "background-repeat: repeat-y;" 而不是 "background-repeat-y: repeat;"。 - Sergo