Question

我有点卡在这里试图找出如何防止背景图像在DIV下方下垂。我不得不采取一些相当令人讨厌的策略。

.animation span {
    position: absolute;
    top: 0;
    width: 100%;
    height: 100%;
    z-index: -999;
    animation-name: fade;
    animation-iteration-count: infinite;
    animation-duration: 40s;
    background-size: cover cover;
    background-repeat: no-repeat;
    background-position: center center;
}

...

<body>
  <div id='banner'>
    <div class="animation">
      <span id="f4"></span>
      <span id="f3"></span>
      <span id="f2"></span>
      <span id="f1"></span>
    </div>
    <div id="title">
      <h1>Silly Webpage Banner</h1>
    </div>
  </div>
  <div id="content" style="background-color:white;">
    Content
  </div>
</body>

Here is a fiddle

我必须在动画类中添加高度，宽度，顶部才能看到图像。如果我排除z-index，则内容DIV会下沉一个图层。我真的很喜欢它尊重背景大小和背景位置，但我无法弄清楚它为什么不会。

Answer 1

正如MDN's position reference所说：

相对定位的元素仍然被认为是在文档中元素的正常流动。相反，一个元素绝对定位的是从流程中取出并因此占用放置其他元素时没有空间。绝对定位元素相对于最近定位的祖先定位（非静态）。如果定位的祖先不存在，则为初始使用容器。

因此，您的背景div不在更高层的流程中，从而隐藏了您的内容元素：这就是您需要z-index规则的原因。

最后，由于您的absolute定位元素不会影响其父元素或受其影响，因此您必须明确定义其尺寸。

Answer 2

你想要更像这样的东西吗？背景动画的东西都包含在具有设置宽度/高度的横幅div中？

＆＃13;

html,
body {
  width: 100%;
  height: 100%;
  padding: 0;
  margin: 0;
}
#banner {
  position: relative;
  display: block;
  height: 4rem;
  width: 100%;
  overflow: hidden;
}
#banner h1 {
  position: absolute;
  /* Position banner title */
  top:1rem;
  left:1rem;
  padding:0;
  margin:0;
}
#main {
  position: relative;
}
.animation div {
  position: absolute;
  width: 100%;
  height: 100%;
  animation-name: fade;
  animation-iteration-count: infinite;
  animation-duration: 40s;
  background-size: cover cover;
  background-repeat: no-repeat;
  background-position: center center;
}
#f1 {
  animation-delay: -0s;
  background-image: url('https://newevolutiondesigns.com/images/freebies/white-wallpaper-14.jpg');
}
#f2 {
  animation-delay: -10s;
  background-image: url('http://hdwallpaperbackgrounds.net/wp-content/uploads/2015/08/White-Background-Wallpapers-3D-Ball.jpg');
}
#f3 {
  animation-delay: -20s;
  background-image: url('http://dlc.middcreate.net/wp-content/uploads/2013/09/quality-photo-for-desktop-white-bubbles-widescreen-picture-and-image-background-wallpaper-with-high-resolution.jpg');
}
#f4 {
  animation-delay: -30s;
  background-image: url('http://hdpic.org/wp-content/uploads/2015/02/Pattern-Black-and-White-Amazing-Background-Cool-Background.jpg');
}
@keyframes fade {
  0% {
    opacity: 1;
  }
  17% {
    opacity: 1;
  }
  25% {
    opacity: 0;
  }
  92% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}

＆＃13;

<!DOCTYPE HTML>

<body>
  <div id='banner'>
    <div class="animation">
      <div id="f4"></div>
      <div id="f3"></div>
      <div id="f2"></div>
      <div id="f1"></div>
    </div>
    <h1>Silly Webpage Banner</h1>
  </div>
  <div id="main">
    <div id="title">
    </div>
    <div id="content" style="background-color:white;">
      Content
    </div>
  </div>

</body>

＆＃13;

在DIV中包含背景图像的CSS

2 个答案: