如何将 CSS 动画图像放在 div 后面？

Question

.znak{
    width: 650px;
    position: absolute;
    left: 33%;
    top: 44%;
    animation-name: padanjeznaka;
    animation-duration: 2s;
    animation-timing-function: linear;
}
@keyframes padanjeznaka{
    0%{top: -700%;}
    90%{top: 44%;}
    95%{top: 36%;}
    100%{top: 44%;}
}
.tznak{
    word-spacing: 80px;
    font-size: xx-large;
    position: absolute;
    left: 41.5%;
    transform: rotate(-2deg);
    top: 47.5%;
    animation-name: padanjeznakateksta;
    animation-duration: 2s;
    animation-timing-function: linear;
    font-style: inherit;
    color: azure;
}
@keyframes padanjeznakateksta{
    0%{top: -700%;}
    90%{top: 47.5%;}
    95%{top: 38.5%;}
    100%{top: 47.5%;}
}
.strelice{
    width: 80px;
    position: absolute;
    top: 55%;
    left: 53.5%;
    animation-name: padanjeznakastrelice;
    animation-duration: 2s;
    animation-timing-function: linear;
}
@keyframes padanjeznakastrelice{
    0%{top: -700%;}
    90%{top: 55%;}
    95%{top: 44%;}
    100%{top: 55%;}
}
.jeszim{
    width: 900px;
    height: 400px;
    background-color: rgb(240, 255, 255,0.6);
    position: absolute;
    left: 26%;
    animation-name: pad;
    animation-duration: 4s;
    animation-timing-function: linear;
}
@keyframes pad{
    0%{top: -100%;}
    100%{top: 0%;}
}
.pahulje{
    width: 200px;
    position: absolute;
    animation-name: pahuljepad;
    animation-timing-function: linear;
    animation-iteration-count: infinite;
}
@keyframes pahuljepad{
    0%{top: -70%;}
    25%{transform: rotate(22.5deg);}
    50%{transform: rotate(45deg);}
    75%{transform: rotate(67.5deg);}
    100%{top: 100%; transform: rotate(90deg);}
}

<html>
    <head>
        <title>ZIMA</title>
        <link rel="stylesheet" href="doba.css">
    </head>
    <body style="background-image: url(Slike/zima.jpg);">
        <img src="Slike/Sign-PNG-Pic.png" class="znak">
        <p class="tznak">JESEN PROLJEĆE</p>
       <a href="proljece.html">
        <img src="slike/white-right-arrow-image-download-1.png" class="strelice" style="transform: rotate(-4deg);">
    </a>
       <a href="jesen.html">
        <img src="slike/white-right-arrow-image-download-1.png" class="strelice" style="transform: rotate(178deg); left: 41.5%;top: 56%;">
     </a>
<div class="jeszim"> </div>
<img src="slike/14-snowflake-png-image.png" class="pahulje" style="animation-duration: 12s;">
<img src="slike/14-snowflake-png-image.png" class="pahulje" style="animation-duration: 12s;left: 80%;">
<img src="slike/14-snowflake-png-image.png" class="pahulje" style="animation-duration: 14s;left: 40%;">
<img src="slike/14-snowflake-png-image.png" class="pahulje" style="animation-duration: 17s;left: 73%;">
<img src="slike/14-snowflake-png-image.png" class="pahulje" style="animation-duration: 20s;left: 30%;">
<img src="slike/14-snowflake-png-image.png" class="pahulje" style="animation-duration: 15s;left: 55%;">
<img src="slike/14-snowflake-png-image.png" class="pahulje" style="animation-duration: 18s;left: 15%;">
<img src="slike/14-snowflake-png-image.png" class="pahulje" style="animation-duration: 12s;">
<img src="slike/14-snowflake-png-image.png" class="pahulje" style="animation-duration: 12s;left: 25%;">
<img src="slike/14-snowflake-png-image.png" class="pahulje" style="animation-duration: 19s;left: 47%;">
<img src="slike/14-snowflake-png-image.png" class="pahulje" style="animation-duration: 16s;left: 67%;">
<img src="slike/14-snowflake-png-image.png" class="pahulje" style="animation-duration: 26s;left: 30%;">
<img src="slike/14-snowflake-png-image.png" class="pahulje" style="animation-duration: 17s;left: 65%;">
<img src="slike/14-snowflake-png-image.png" class="pahulje" style="animation-duration: 23s;left: 35%;">
    </body>
</html>

所以，我想知道如何在 div 图像向下移动时将图像隐藏在它后面？我要在此处 post 一张 gif 动图，以便它可见：https://gyazo.com/6b788ebf600e0373ad0bd7d2975f3adf 如您所见，雪花在 div 前面，而我希望它们在 div 后面。有什么建议吗？

Answer 1

将 z-index: -1; 添加到您的图像 class .pahulje。这将确保雪花落在 div 后面。我调整了不透明度，所以你可以在部分透明的 div.

后面看到它

.znak {
  width: 650px;
  position: absolute;
  left: 33%;
  top: 44%;
  animation-name: padanjeznaka;
  animation-duration: 2s;
  animation-timing-function: linear;
}

@keyframes padanjeznaka {
  0% {
    top: -700%;
  }
  90% {
    top: 44%;
  }
  95% {
    top: 36%;
  }
  100% {
    top: 44%;
  }
}

.tznak {
  word-spacing: 80px;
  font-size: xx-large;
  position: absolute;
  left: 41.5%;
  transform: rotate(-2deg);
  top: 47.5%;
  animation-name: padanjeznakateksta;
  animation-duration: 2s;
  animation-timing-function: linear;
  font-style: inherit;
  color: azure;
}

@keyframes padanjeznakateksta {
  0% {
    top: -700%;
  }
  90% {
    top: 47.5%;
  }
  95% {
    top: 38.5%;
  }
  100% {
    top: 47.5%;
  }
}

.strelice {
  width: 80px;
  position: absolute;
  top: 55%;
  left: 53.5%;
  animation-name: padanjeznakastrelice;
  animation-duration: 2s;
  animation-timing-function: linear;
}

@keyframes padanjeznakastrelice {
  0% {
    top: -700%;
  }
  90% {
    top: 55%;
  }
  95% {
    top: 44%;
  }
  100% {
    top: 55%;
  }
}

.jeszim {
  width: 900px;
  height: 400px;
  background-color: rgb(240, 255, 255, 0.8);
  position: absolute;
  left: 26%;
  animation-name: pad;
  animation-duration: 4s;
  animation-timing-function: linear;
}

@keyframes pad {
  0% {
    top: -100%;
  }
  100% {
    top: 0%;
  }
}

.pahulje {
  width: 200px;
  position: absolute;
  z-index: -1;
  animation-name: pahuljepad;
  animation-timing-function: linear;
  animation-iteration-count: infinite;
}

@keyframes pahuljepad {
  0% {
    top: -70%;
  }
  25% {
    transform: rotate(22.5deg);
  }
  50% {
    transform: rotate(45deg);
  }
  75% {
    transform: rotate(67.5deg);
  }
  100% {
    top: 100%;
    transform: rotate(90deg);
  }
}

<html>

<head>
  <title>ZIMA</title>
  <link rel="stylesheet" href="doba.css">
</head>

<body style="background-image: url(Slike/zima.jpg);">
  <img src="Slike/Sign-PNG-Pic.png" class="znak">
  <p class="tznak">JESEN PROLJEĆE</p>
  <a href="proljece.html">
    <img src="slike/white-right-arrow-image-download-1.png" class="strelice" style="transform: rotate(-4deg);">
  </a>
  <a href="jesen.html">
    <img src="slike/white-right-arrow-image-download-1.png" class="strelice" style="transform: rotate(178deg); left: 41.5%;top: 56%;">
  </a>
  <div class="jeszim"> </div>
  <img src="slike/14-snowflake-png-image.png" class="pahulje" style="animation-duration: 12s;">
  <img src="slike/14-snowflake-png-image.png" class="pahulje" style="animation-duration: 12s;left: 80%;">
  <img src="slike/14-snowflake-png-image.png" class="pahulje" style="animation-duration: 14s;left: 40%;">
  <img src="slike/14-snowflake-png-image.png" class="pahulje" style="animation-duration: 17s;left: 73%;">
  <img src="slike/14-snowflake-png-image.png" class="pahulje" style="animation-duration: 20s;left: 30%;">
  <img src="slike/14-snowflake-png-image.png" class="pahulje" style="animation-duration: 15s;left: 55%;">
  <img src="slike/14-snowflake-png-image.png" class="pahulje" style="animation-duration: 18s;left: 15%;">
  <img src="slike/14-snowflake-png-image.png" class="pahulje" style="animation-duration: 12s;">
  <img src="slike/14-snowflake-png-image.png" class="pahulje" style="animation-duration: 12s;left: 25%;">
  <img src="slike/14-snowflake-png-image.png" class="pahulje" style="animation-duration: 19s;left: 47%;">
  <img src="slike/14-snowflake-png-image.png" class="pahulje" style="animation-duration: 16s;left: 67%;">
  <img src="slike/14-snowflake-png-image.png" class="pahulje" style="animation-duration: 26s;left: 30%;">
  <img src="slike/14-snowflake-png-image.png" class="pahulje" style="animation-duration: 17s;left: 65%;">
  <img src="slike/14-snowflake-png-image.png" class="pahulje" style="animation-duration: 23s;left: 35%;">
</body>

</html>

如何将 CSS 动画图像放在 div 后面？

How do I place an CSS animated images behind a div?

html

css

css-animations

keyframe