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

有多种方法可以实现这一目标。我会考虑使用伪元素作为叠加层之类的东西，但这是做到这一点的一种方法。

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

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 {
  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动画上方叠加图像

2 个答案: