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

#contentdiv在#containerdiv 里面.我想#container从背面开始以687px从顶部开始重复.可能吗？

编辑:div的前x个像素(从顶部)是否有可能有emtpy空间,x像素背景开始后？

Answer 1

据我所知,你不可能如何做到这一点,repeat-x和repeat-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;
    }