css从定义的位置开始重复背景

Question

#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;
    }

#content div 位于 #container div 内。我希望 #container 的背景从顶部开始重复 687 像素。是否可以？

编辑：是否有可能 div 的前 x 像素（从顶部）有空空间，并且在 x 像素背景开始之后？

Answer 1

重复 x 和重复 y 不可能在沿轴的两个方向上重复图像，

据我所知，如果您重复容器背景全长，则 内容 div 背景图像是否未覆盖无论如何，先增加 678px 吗？

您能否在 JSFiddle 中提供代码，以便我们可以看到您想要实现的效果，会有一种方法；）

Answer 2

您可以使用伪元素（::before 或 ::after）来实现此目的，并利用 calc() 来获取偏移量。

伪元素将为您提供更多控制，不会影响内容，并且不需要额外的 HTML 标记。

这是一个距离顶部 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>

您还可以使用相同的技术从左侧偏移：

.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>

或者甚至从两个方向（也相反！）：

.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>

Answer 3

background : url('image path') 0px 287px repeat-y;

这将从顶部 287 像素处垂直重复您的背景图像。

但另一种方法是将其设置为您的内容 div ：

margin-top:287px;

最好的解决方案是这样做：

#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;
    }