我正在尝试将第 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>
最佳答案
我可以通过将 style="position:absolute;z-index:0;"
添加到第一个 div 和 position:absolute;z-index:1; 来解决这个问题
到第二个 div,然后将它们层叠在一起
关于html - 如何使用 css 将图像叠加在一起并使它们无限滚动?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/39804840/