Блог

Я пытаюсь наложить 2 изображения 1 поверх другого и заставить их прокручиваться бесконечно с помощью css. Я могу прокручивать изображения, но не накладывать их одно на другое и прокручивать с разной скоростью, чтобы создать эффект.

Мой css:

 @keyframes animatedBackground {
    from { background-position: 0 0; }
    to { background-position: 100% 0; }
}

#animate-area   { 
    width: 100vw; 
    height: 100vw; 
    background-image: url(http://oi64.tinypic.com/2r7ri29.jpg);
    background-position: 0px 0px;
    background-repeat: repeat-x;

    animation: animatedBackground 135s linear infinite;
}

#animate-area2  { 
    width: 100vw; 
    height: 100vw; 
    background-image: url(http://oi67.tinypic.com/2niy905.jpg);

    background-repeat: repeat-x;
  position: relative;
    animation: animatedBackground 80s linear infinite;
}
  

и мой HTML:

 <div id="animate-area"></div>
<div id="animate-area2"></div>
  

JSFiddle

Я смог исправить это, добавив style="position:absolute;z-index:0;" в первый div и position:absolute;z-index:1; во второй div, которые затем накладывали их друг на друга

измените положение относительно абсолютного положения. а также используйте z-index 1 и 2 для темы. 🙂

  #animate-area   { 
        width: 100vw; 
        height: 100vw; 
        background-image: url(http://oi64.tinypic.com/2r7ri29.jpg);
        background-position: 0px 0px;
        background-repeat: repeat-x;
        position:absolute;
        z-index:1;

        animation: animatedBackground 135s linear infinite;
    }

    #animate-area2  { 
        width: 100vw; 
        height: 100vw; 
        background-image: url(http://oi67.tinypic.com/2niy905.jpg);

        background-repeat: repeat-x;
        position:absolute;
        z-index:2;
        animation: animatedBackground 80s linear infinite;
    }