html - 固定的 div 背景图像被其他内容覆盖

Question

当我将固定背景图像放置在具有 width:100% 和 height:100% 的屏幕顶部的 div 中时，它会被应该的内容覆盖像这样在它下面:

但是当我使用像 100px 这样的高度像素值时，会发生这种情况:

我希望能够使用 width:100% 和 height:100% 来获得不被遮盖的全屏固定背景图像.

HTML:

<div class="background">
    <div class="hero">
      <div class="arrow_down">
        <a><i class="fa fa-angle-down"></i></a>
      </div>
    </div>
</div>

CSS:

.background {
  position:relative;
  top:0;
  overflow:hidden;
  height:100%;
  width:100%;
 }

.background .hero {
  background-image: url('../images/background.jpg');
  background-repeat:no-repeat;
  background-size:100% auto;
  background-attachment:fixed;
  background-position:center top;
  width:100%;
  height:100px;
}

Answer 1

您应该尝试使用 height: 100vh;，这是解决此问题的可靠方法。我会在你的网站上测试它，但你没有包括它，所以我会发布一个例子:

body{margin:0px;}
.background {
  position:relative;
  top:0;
  overflow:hidden;
  height:100%;
  width:100%;
 }

.hero {
  margin:0px;
  padding:0px;
  background-image: url('http://www.funnycatpix.com/_pics/Arghhhh532.jpg');
  background-repeat:no-repeat;
  background-size:100% auto;
  background-attachment:fixed;
  background-position:center top;
  width:100%;
  height:100vh;
}

<div class="hero"></div>
<div class="background">
      <div class="arrow_down">
        <a><i class="fa fa-angle-down"></i></a>
    </div>
</div>