javascript - 拖动浏览器导致背景图像与下一节重叠

Question

我正在尝试使页面缩放或移动设备兼容，我认为这是术语。我的页面现在的问题是它在一定尺寸下看起来不错，但是当我拖动浏览器时，我页面的背景图片覆盖了“服务”标题<section>。部分。

这是 jsFiddle:http://jsfiddle.net/eg18dfy0/4/不确定这会有多大用处，因为此处未包含本地文件。

正常:

拖动:

这是我的代码:

重要的 HTML 片段:

<header>
  <div class="background_image">
  </div>
  <div class="welcome-text-container">
    <div class="row">
      <div class="welcome-text1">Welcome!</div>
      <div class="welcome-text2">BE GOOFY, TAKE A PICTURE!</div>
      <div class="btn-row">
        <a href="#services" class="welcome-btn btn-lg">TELL ME MORE</a>
      </div>
    </div>
  </div>
</header>

<!-- services -->
<section id="services">
  <div class="container">
    <div class="service-title">Services</div>
    <div class="service-caption">What we'll do for you</div>
  </div>
</section>

CSS:

.background_image {
    background-image: image-url("header-bg.jpg");
    background-size: contain;
    background-repeat: no-repeat;
    width: 100%;
    height: 0;
    padding-top: 66.64%; 
    position: absolute;
    /* (img-height / img-width * width) */
    /* (853 / 1280 * 100) */
}

/* Services */

#services {
    padding-top: 110px;
    margin-top: 75px;
}

.service-title {
    text-align: center;
    font-size: 55px;
    font-weight: 700;
}

.service-caption {
    text-align: center;
    font-size: 20px;
}

Answer 1

这应该可以解决您的问题:

Fiddle illustrating fix

您在 div 中设置背景图像，该 div 根据文档流获得更高的堆叠优先级，因此它与您的后续 div 重叠。

这是我为解决问题而添加的 CSS:

.container > div.background-image {
    z-index: 1;
}

.container > div {
    position: relative;
    z-index: 2;
}

有更好的方法来做到这一点(即不为背景图像创建单独的 div)，但这将解决您的问题而无需对文档结构进行重大更改。

全部归功于http://placehold.it对于占位符图像。如果您要在 StackOverflow 上解决 CSS 问题，这将是您的救星。