html - 背景分开/彼此重叠

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

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

像您所做的那样远离百分比也可以解决问题。

Answer 2

创建一个 .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;
}