修复了由其他内容掩盖的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;，这是一种经过验证的方法来解决这个问题。我会在你的网站上测试它，但是你没有包含它，所以我会发布一个例子：

＆＃13;

＆＃13;

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

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;