在CSS动画上方叠加图像
[英]Overlay image on top of css animation
问题描述
I am trying to overlay an image on top of this css animation. 
我正在尝试在此CSS动画上叠加图像。 I just want it to sit right in the middle of it. 我只希望它位于其中间。 I have tried playing with the z-index and different positions, but I can't seem to get it to show up. 我尝试过使用z-index和不同的位置，但是似乎无法显示它。 I would also like to get the colors to change when the mouse moves over different spots. 当鼠标移到不同位置时，我也想改变颜色。
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 个解决方案
解决方案1
0 已采纳 2019-05-13 23:55:40
There are a number of ways you could achieve this. 您可以通过多种方式实现这一目标。 I would look into using a pseudo-element for the overlay or something but here is one way to do it. 我会考虑使用伪元素作为叠加层或其他东西，但这是一种实现方式。
The main problem that I saw was that you needed to define height and width for the logo. 我看到的主要问题是您需要定义徽标的高度和宽度。
Codepen if you prefer: https://codepen.io/zenRyoku/pen/rgWNQo?editors=1100 如果您愿意，可以使用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>
解决方案2
0 2019-05-14 02:06:53
You can create the effect by using multiple backgrounds and applying it to the body - note that the background specified first will come on top in the stacking order. 您可以通过使用多个背景并将其应用到主体来创建效果-请注意，首先指定的背景将在堆叠顺序中位于顶部。 See demo below: 请参见下面的演示：
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; } }
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.