我有一个图像设置为div的背景图像。 DIV大小正在改变，它们内部是一个渐变的图像。
CSS：
#scroller_shadow{
background-image:url(../img/ui/shadow.png);
background-repeat:repeat-x;
background-position:top;
}
我需要一个跨浏览器的解决方案，使图像只适合div的高度在y轴，保持repeat-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;
}
无论如何，这个想法是从图像创建拉伸效果。
