如何让我的动画图像覆盖所有背景？

Question

我有一张图片用作背景，在 CSS 中设置动画，但它将我的所有内容推送到带有纯白色背景的页面底部。 有谁知道我怎样才能让它表现得更像一个动画墙纸，这样我的内容就不会被推倒？

 #map { height: 400px; width: 400px; margin: 0 auto; } .check { text-align: center; } h3, h2, h1, a { text-align: center; background-color: transparent; } #sky { overflow: hidden; } #clouds { width: 200%; height: 1000px; background-image: url('https://images.unsplash.com/photo-1455735459330-969b65c65b1c?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1652&q=80'); -webkit-animation: movingclouds 25s linear infinite; -moz-animation: movingclouds 25s linear infinite; -o-animation: movingclouds 25s linear infinite; } @keyframes movingclouds { 0% { margin-left: 0%; } 100% { margin-left: -100%; } }

 <div id="sky"> <div id="clouds"></div> </div>

Answer 1

将动画移动到背景位置。 这样，它就会在它上面的任何东西后面动画。 在这种情况下，我已将背景移到正文，但您也可以使用绝对/相对位置。

通过设置边距动画，您可以将所有内容推到一侧，而不仅仅是背景。

body {

  background-image: url('https://images.unsplash.com/photo-1455735459330-969b65c65b1c?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1652&q=80');
  -webkit-animation: movingclouds 25s linear infinite;
  -moz-animation: movingclouds 25s linear infinite;
  -o-animation: movingclouds 25s linear infinite;
}

@keyframes movingclouds {
  0% {
    background-position: 0%;
  }
  100% {
    background-position: -100%;
  }
}

工作示例： https : //jsbin.com/ruyemijasi/edit?html,css,js,output