Question

我有一个带背景图片的div。

在这个div中，我有另一个div，它的比例和不透明度都有动画，它会在父图像周围产生一种涟漪效应。

<div class="image">
   <div class="ripple"></div>
</div>

图像具有固定的定位，因为它应该位于屏幕的顶部。纹波div具有绝对定位（也可以是相对的），动画应该从图像的中心开始。

问题是嵌套的div动画出现在父div之上。我希望图像位于顶部，以及背后的动画。

我尝试过不同的解决方案，包括z-index和负z-index，但看起来一样。

演示问题：http://jsfiddle.net/m271h3s6/1/。

您可以在演示中看到黑色圆圈出现在Google徽标上方。我希望徽标始终位于动画上方。

Answer 1

只需添加一个元素（此处我添加了span），其中包含一些类（此处为：parent_image）涟漪效应孩子。

为什么要使用<span>：这是因为不会留下任何空格，就像内联元素一样。

看看：

＆＃13;

.parent {
    position: fixed;
    top: 100px;
    width: 100%;
    height: 200px;
}

.child {
    position: absolute;
    animation: ripple 10s 0.5s ease-out infinite;
    background-color: #000;
    opacity: 0.9;
    width: 2px;
    height: 2px;
    border-radius: 1px;
    left: 50%;
    top: 100px;
}

.parent_image
{
background:url("http://res.cloudinary.com/demo/image/fetch/fl_png8/https://www.google.com/images/branding/googlelogo/2x/googlelogo_color_272x92dp.png") no-repeat center;
    position:absolute;
    width: 100%;
    height: 100%;
}

@keyframes ripple {
        0% {
          transform: scale(1);
          opacity: 0.9;
        }
        80%, 100% {
          transform: scale(500);
          opacity: 0;
        }

＆＃13;

<div class="parent">
    <div class="child"></div> 
    <span class="parent_image"> </span>
</div>

＆＃13;

Answer 2

有趣的问题，流程就是这样，将这些属性分配给父div ;

  position: absolute;
  top: 40px; //optional
  left: 40px; //optional
  transform: scale(1.5, 1.5);

根据您希望用动画覆盖多少图像，您必须提出多个divs（在某些情况下甚至最多可达36 divs！）每个div负责在后台提供基础动画，此代码段可以是子div 的示例;

  position: absolute;
  top: 0px;
  width: 14px;
  height: 240px;
  background: url("http//:yourimage");
  animation: wobble 3s infinite;
  animation-timing-function: ease-in-out;
  animation-direction: alternate;

正在处理确切动画网站的子子元素将是这样的;

.column:nth-child(1) {
  left: 10px;
  background-position: -10px 0;
  animation-delay: 30ms;
}
.column:nth-child(2) {
  left: 20px;
  background-position: -20px 0;
  animation-delay: 60ms;
}

.column:nth-child(3) {
  left: 30px;
  background-position: -30px 0;
  animation-delay: 90ms;
}
.column:nth-child(4) {
  left: 40px;
  background-position: -40px 0;
  animation-delay: 120ms;
}
 /// . and even more...

这里可以找到一个很好的例子; Animation on Background

嵌套div背景动画显示在父背景图像

2 个答案: