Вложенная анимация фона div появляется над родительским фоном image

Question

У меня есть div с фоновым изображением.

Внутри этого div у меня есть еще один div, который имеет анимацию по ее масштабу и непрозрачности, и это создает эффект ряби вокруг родительского изображения.

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

Изображение имеет фиксированное позиционирование, поскольку оно должно находиться в верхней части экрана. Разновидность div имеет абсолютное позиционирование (может быть и относительное), и анимация должна начинаться с центра изображения.

Проблема в том, что вложенная анимация div появляется над родительским div. Я хочу, чтобы изображение было наверху и анимация за ним.

Я пробовал разные решения, включая z-индексы и отрицательный индекс z, но он выглядит одинаково.

Демонстрация проблемы: http://jsfiddle.net/m271h3s6/1/.

Вы можете видеть в демо, что черный круг появляется над логотипом google. Я хочу, чтобы логотип всегда был над анимацией.

Answer 1

Просто добавьте еще один элемент (здесь я добавил span) с некоторым класса (здесь: parent_image), который будет через мультипликационный эффект ребенка.

Зачем использовать <span>: Это потому, что он не оставит никакого свободного пространства, так же как и встроенный элемент.

Посмотрите:

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

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

Answer 2

Интересный вопрос, ну, как поток, назначьте эти свойства своему родительскому div;

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

И основано на том, сколько из вашего изображения, которое вы хотели бы, чтобы покрыть с анимацией, ты должен придумать несколько divs (даже до 36 divs в некоторых случаях!), Тогда как каждый div берет на себя ответственность в обеспечивая базовую анимацию на заднем плане, этот фрагмент может быть выборкой вашего child 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