<section>背景分开/相互重叠</section>

Question

我正在尝试制作一个包含chartbeat.com等几个不同部分的目标网页。我在HTML中完成了以下操作：

    <section class="payroll">
      <p>
        This is the Payroll Section
      </p>
    </section><!-- END class="payroll" -->  

    <section class="pos">
      <p>
        This is the Point of Sale Section
      </p>
    </section><!-- END class="pos" -->

这就是我的CSS：

    .payroll {
    background-image: url('../img/payroll_bg.jpg');
    background-repeat: repeat-x;
    height: 100%;
}

.pos {
    background-image: url('../img/pos_bg.jpg');
    background-repeat: repeat-x;
    height: 100%;
}

问题是这些部分是分开的，它们之间留有很大的差距。见图。如果我缩小窗口或检查元素，则这些部分会向上浮动以相互重叠。

有什么想法吗？谢谢！

Answer 1

创建一个.wrapper div并使用它：

.wrapper {
width:100%; /* you can define as you want */
height:100%; /* you can define as you want */
position:relative;
}
.payroll {
background-image: url('../img/payroll_bg.jpg');
background-repeat: repeat-x;
height: 100%;
position:absolute;
top:0;
left:0;
width:0 auto;
}
.pos {
background-image: url('../img/pos_bg.jpg');
background-repeat: repeat-x;
height: 100%;
position:absolute;
top:0;
left:0;
opacity:0.9;
width:0 auto;
}

Answer 2

我认为这个问题是由你的100％高度引起的。您需要在父元素上设置高度，因为任何百分比尺寸都基于它的大小。

远离百分比，就像你所做的那样，也可以做到这一点。