CSS css从定义的位置开始重复背景
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/5604663/
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 start repeating background from defined position
提问by ilija veselica
#container{
background:url(images/bg-main.png) repeat-y;
width: 903px;
background-position: 0px 687px;
background-position: bottom;
height: 1200px;
margin-left: auto;
margin-right: auto;
}
#content{
background:url(images/bg-wood.png) repeat-y;
width: 903px;
height: 678px;
margin-left: auto;
margin-right: auto;
}
#contentdiv is inside #containerdiv. I want #container's background to start repeating at 687px from top. Is it possible?
#contentdiv 在#containerdiv里面。我希望#container的背景从顶部开始在 687px 处重复。是否可以？
EDIT: Is it possible that first x pixels of div (from top) have emtpy space and after x pixels backgrund starts?
编辑：div 的前 x 个像素（从顶部）是否有可能是空的空间，并且在 x 个像素背景开始之后？
采纳答案by Farzin Zaker
background : url('image path') 0px 287px repeat-y;
This will repeat vertically your background image from 287px from top.
这将从顶部 287px 垂直重复您的背景图像。
but another way is to set this to your content div :
但另一种方法是将其设置为您的内容 div ：
margin-top:287px;
you best solution is to do like this :
你最好的解决办法是这样做：
#container{
position:relative;
}
#background{
background:url('image url');
position:absolute;
top:287px;
left:0px;
z-index:100;
}
#content{
position:absolute;
top:0px;
left:0px;
z-index:99999;
}
回答by clairesuzy
As far as I know it's not possible how you're trying to do it, repeat-x and repeat-y, will repeat the image in both directions along the axis
据我所知，您无法尝试这样做，repeat-x 和repeat-y 将沿轴在两个方向上重复图像
if you repeat container background full length does the content div background image not cover up the first 678px anyway?
如果您重复容器背景全长，内容 div 背景图像是否不会覆盖第一个 678 像素？
can you provide code in a JSFiddle so we can see what effect you're trying to achieve there will be a way ;)
你能在 JSFiddle 中提供代码吗，这样我们就可以看到你想要达到的效果会有一种方法;)
回答by Aziz
You can achieve this with pseudo element (::beforeor ::after) and take advantage of calc()for the offset.
您可以使用伪元素（::before或::after）来实现这一点，并利用calc()偏移量。
Pseudo element will give you more control and won't affect the content and does not require the need for an extra HTML tag.
伪元素会给你更多的控制，不会影响内容，不需要额外的 HTML 标签。
Here is a basic example with 100px offset from top:
这是一个从顶部偏移 100px 的基本示例：
.background {
height: 300px;
border:1px solid;
position: relative;
}
.background::before {
content: '';
position: absolute;
bottom: 0;
left: 0;
height: calc(100% - 100px);
width: 100%;
display: block;
box-sizing: border-box;
background: url(//placehold.it/100x100);
}<div class="background"></div>You can also use the same techique to offset from left:
您还可以使用相同的技术从左侧偏移：
.background {
height: 300px;
border:1px solid;
position: relative;
}
.background::before {
content: '';
position: absolute;
bottom: 0;
right: 0;
height: 100%;
width: calc(100% - 100px);
display: block;
box-sizing: border-box;
background: url(//placehold.it/100x100);
}<div class="background"></div>Or even from both directions (reversed, too!):
或者甚至从两个方向（也反向！）：
.background {
height: 300px;
border:1px solid;
position: relative;
}
.background::before {
content: '';
position: absolute;
top: 0;
left: 0;
height: calc(100% - 100px);
width: calc(100% - 100px);
display: block;
box-sizing: border-box;
background: url(//placehold.it/100x100);
}<div class="background"></div>