修复了 div 背景图片被其他内容遮盖的问题

Question

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

但是当我使用像 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;，这是解决此问题的可靠方法。我会在你的网站上测试它，但你没有包括它，所以我会 post 举个例子：

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>

修复了 div 背景图片被其他内容遮盖的问题

Fixed div background image covered up by other content

html

css

background-image