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的背景从顶部开始重复687px。有可能吗？

编辑：div的前x个像素（从顶部）是否有可能有空间和x像素背景开始？

Answer 1

据我所知，你不可能尝试这样做，重复-x和重复-y，将沿轴的两个方向重复图像

如果你重复容器背景全长，内容div背景图像是否还没有掩盖第一个678px呢？

你可以在JSFiddle中提供代码，这样我们就可以看到你试图实现的效果会有一种方法;）

Answer 2

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

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

这是一个从顶部偏移100px的基本示例：

＆＃13;

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

＆＃13;

<div class="background"></div>

＆＃13;

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

＆＃13;

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

＆＃13;

<div class="background"></div>

＆＃13;

甚至从两个方向（也反过来！）：

＆＃13;

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

＆＃13;

<div class="background"></div>

＆＃13;

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

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

3 个答案: