Наложение изображения поверх анимации CSS - PullRequest
Новая
       23

Наложение изображения поверх анимации CSS

1 голос
/ 14 мая 2019

Я пытаюсь наложить изображение поверх этой анимации 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>

Ответы [ 2 ]

0 голосов
/ 14 мая 2019

Вы можете создать эффект, используя несколько фонов и применив его к телу - обратите внимание, что фон, указанный первым, будет располагаться сверху в порядке наложения.Смотри демо ниже: 

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;
  }
}
0 голосов
/ 14 мая 2019

Есть несколько способов достичь этого.Я хотел бы использовать псевдоэлемент для наложения или что-то в этом роде, но вот один из способов сделать это.

Основная проблема, которую я увидел, заключалась в том, что вам нужно было определить высоту и ширину для логотипа.

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>
...