CSS：重复的背景位置？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/3761909/
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
CSS: background position with repeat?
提问by NullVoxPopuli
I currently have an image repeating on y, but I want it to start 20 px down from where the div starts....
我目前有一个在 y 上重复的图像，但我希望它从 div 开始的位置向下 20 像素开始......
how do I do that?
我怎么做？
回答by sandeep
Maybe you should use :afteror :beforefor this, because there's no need to add extra markup in your HTML. Like this:
也许您应该为此使用:after或:before，因为无需在您的 HTML 中添加额外的标记。像这样：
.container{
height:400px;
background:red;
position:relative;
width:400px;
}
.container:after{
content:"";
position:absolute;
top:20px;
left:0;
right:0;
bottom:0;
background:url(http://lorempixel.com/400/200) repeat-y;
}
Check this http://jsfiddle.net/h6K9z/
检查这个http://jsfiddle.net/h6K9z/
It works in IE8 & above. For IE7 or IE6 you can give extra DIVfor this.
它适用于 IE8 及更高版本。对于 IE7 或 IE6，您可以DIV为此付出额外的代价。
回答by Jon Harding
I prefer the shorthand method:
我更喜欢速记方法：
.yourClass {
background: url(../images/yourImage.png) repeat-y 0 20px;
}
回答by moey
I don't think simply combining background-positionand background-repeate.g. repeat-y 0 20pxwill work. Assuming this jsFiddle samplerepresents OP's case, the solution should make the green background starts at (vertical) 20px; the "Hello there!" text shouldn't sit on top of the green background.
我不认为简单地结合background-position和background-repeategrepeat-y 0 20px会起作用。假设这个jsFiddle 示例代表 OP 的情况，解决方案应该使绿色背景从（垂直）20px 开始；“你好！” 文本不应位于绿色背景之上。
My answer is this cannot be done plainly by CSS; meaning, you might want to change your HTML structure to accomplish your goal. However, I am starting a bounty hoping others to come up with better answers.
我的回答是 CSS 不能简单地做到这一点；这意味着，您可能想要更改 HTML 结构以实现您的目标。但是，我开始悬赏，希望其他人提出更好的答案。
回答by Dutchie432
.yourClass{
background: url(images/yourImage.png) repeat-y;
background-position: 0px 20px;
}
回答by Justin Niessner
You just need the background-positionproperty to be set:
您只需要设置background-position属性：
background-position: 0px 20px;
background-repeat: repeat-y;
