CSS 背景图像仅拉伸 y 轴，保留重复 x
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/15160764/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Background image stretch y-axis only, keep repeat-x
提问by Idan Shechter
I have an image set as a background image of a div. The DIV size is changing and inside their is the image which is a gradient.
我有一个图像设置为 div 的背景图像。DIV 大小正在变化，在它们内部是渐变的图像。
CSS:
CSS：
#scroller_shadow{
background-image:url(../img/ui/shadow.png);
background-repeat:repeat-x;
background-position:top;
}
I need a cross-browser solution for making the image fit the height of the div in the y-axis only, keeping the repeat-x. The DIV is being resized dynamically via JQuery.
我需要一个跨浏览器的解决方案，使图像仅在 y 轴上适合 div 的高度，并保持重复 x。DIV 正在通过 JQuery 动态调整大小。
Their might be a cross-browser option using JQuery. I don't mind using scripts to achieve that in order to get cross-browser support (IE7+). I don't want to stretch the image because it loses the intensity when you stretch the image on the x-axis, making a semi-transparent png image almost transparent.
它们可能是使用 JQuery 的跨浏览器选项。我不介意使用脚本来实现这一点以获得跨浏览器支持（IE7+）。我不想拉伸图像，因为在 x 轴上拉伸图像时它会失去强度，使半透明的 png 图像几乎透明。
Thanks.
谢谢。
回答by Charlotte
I had this problem too. It's easy in most browsers, but IE8 and below it's tricky.
我也有这个问题。在大多数浏览器中都很容易，但在 IE8 及以下的浏览器中就很棘手了。
Solution for modern (anything not IE8 and below) browsers:
现代（非 IE8 及以下）浏览器的解决方案：
#scroller_shadow {
background: url(../img/ui/shadow.png) center repeat-x;
background-size: auto 100%;
}
There are jQuery plugins that can mimic background-size for IE8 and below, specifically backgroundSize.jsbut it doesn't work if you want it to repeat.
有一些 jQuery 插件可以模拟 IE8 及以下的背景大小，特别是backgroundSize.js，但如果你想重复它就行不通。
Anyways thus begins my terrible 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>
Make sure to include enough <img>'s to cover the area needed.
确保包含足够<img>的 以覆盖所需的区域。
CSS:
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;
}
Anyways, the idea is to create the stretch effect from the images.
无论如何，这个想法是从图像中创建拉伸效果。
