只有轴，保持重复
我有一个图像设置为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图像几乎透明。
谢谢。
我也有这个问题。 在大多数浏览器中都很容易，但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。
链接地址: http://www.djcxy.com/p/89317.html