在 css 动画之上叠加图像

Question

我正在尝试在此 css 动画之上叠加图像。我只是想让它坐在它的中间。我试过使用 z-index 和不同的位置，但我似乎无法让它显示出来。我还想让颜色在鼠标移过不同点时发生变化。

body {
  margin: 0;
  padding: 0;
}

.container {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: linear-gradient(to right, #FFB6C1 10%, #FF69B4 51%, #FFB6C1 100%);
  background-size: cover;
  animation: animate 60s linear infinite loop;
}



.clouds {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: url(https://image.ibb.co/cbYTjf/cloud.png);
    animation: animate 60s linear infinite;
  z-index:1;
}
.logo{
  background-image:url(https://i.vgy.me/7FcUbx.jpg)
    z-index: 10;
  position:absolute;
}

@keyframes animate {

  0% {
    background-position: 0px;
  }
  100% {
     background-position: 1063px;
    
  }

}

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title> Clouds </title>

  <link rel="stylesheet" href="clouds.css">
</head>

<body>
  <div class= "container">
  </div>
  <div class="background-color"></div>

  <div class="clouds">
    <div class="logo">
    
  </div>
</body>

Answer 1

您可以通过多种方式实现这一目标。我会考虑使用 pseudo-element 作为叠加层或其他东西，但这是一种方法。

我看到的主要问题是您需要为徽标定义高度和宽度。

Codepen 如果你愿意的话： https://codepen.io/zenRyoku/pen/rgWNQo?editors=1100

body {
  height: 100vh;
  width: 100%;
  margin: 0;
  padding: 0;
}

.container {
  position: relative;
  width: 100%;
  height: 100%;
  background: linear-gradient(to right, #FFB6C1 10%, #FF69B4 51%, #FFB6C1 100%);
  background-size: cover;
  animation: animate 60s linear infinite loop;
}

.clouds {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: url('https://image.ibb.co/cbYTjf/cloud.png');
  animation: animate 60s linear infinite;
  z-index: 1;
}

.logo {
  position: absolute;
  top: 50%;
  left: 50%;
  height: 20%;
  width: 20%;
  background: url('https://i.vgy.me/7FcUbx.jpg') center center / cover;
  z-index: 10;
  transform: translate(-50%, -50%);
}

@keyframes animate {
  0% {
    background-position: 0px;
  }
  100% {
    background-position: 1063px;
  }
}

<!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8">
  <title> Clouds </title>

  <link rel="stylesheet" href="clouds.css">
</head>

<body>
  <div class="container">
    <div class="clouds"></div>
    <div class="logo"></div>
  </div>
  
</body>

Answer 2

您可以通过使用 多个背景 并将其应用于 body 来创建效果 - 请注意，第一个指定的背景将在堆叠顺序中位于顶部。请参阅下面的演示：

body {
  margin: 0;
  min-height: 100vh;
  background: url(https://i.vgy.me/7FcUbx.jpg) center / 100px auto no-repeat,
              url(https://image.ibb.co/cbYTjf/cloud.png) right / cover no-repeat, 
              linear-gradient(to right, #FFB6C1 10%, #FF69B4 51%, #FFB6C1 100%) center / cover no-repeat;
  animation: animate 60s linear infinite;
}

@keyframes animate {
  to {
    background-position: center, left, center;
  }
}

在 css 动画之上叠加图像

Overlay image on top of css animation

html

css

background-image