Css 2个背景图像和单独的动画？

这让我很烦恼，因为我知道这是可能的，我真的不知道如何正确地编写它。以下是我的愿景：

到目前为止，在我的css中，我已经实现了云动画

#home{
margin: 0;
padding-top: 327px;
height: 57.78vh;    
background: #6bbfff url('../images/clouds.png') repeat-x fixed 50% 10%;
text-align: center;
-webkit-animation: cloudmove 180s infinite linear;
animation: cloudmove 180s infinite linear;
}

@keyframes cloudmove{
    0%   { background-position: 0% 10%; }
    100% { background-position: 100% 10%; }
}

@-webkit-keyframes cloudmove{
    0%   { background-position: 0% 10%; }
    100% { background-position: 500% 10%; }
}

我一直在尝试将上图中的风景插图添加为背景图片2，但我遇到了问题。如何使css动画不应用于它

谢谢

您可以这样做：

您的相关CSS依赖于CSS3中背景的一些新特性

分层背景图像

您可以这样实例化这些：

.my-rule {
  background-image: url(image1.png), url(image2.png);
  background-position: 0 0, 50% 50%;
}

这很简单！您只需要用逗号分隔每个背景图像的所有规则。这也直接涉及到动画，如下所示：

@keyframes cloudmove{
    0%   { background-position: 0% 10%, 0% 0%; }
    100% { background-position: 100% 10%, 100% 0%; }
}

@-webkit-keyframes cloudmove{
    0%   { background-position: 0% 10%, 0% 0%; }
    100% { background-position: 500% 10%, 100% 0%; }
}

---

希望有帮助

难道你不能添加另一个元素来获得第二个背景图像吗？你是什么意思？第二层的div彼此重叠？这对于一个反应灵敏的设计来说并不理想。哈哈，非常感谢，我原以为它会更复杂，但显然这是你应该做的！对关键帧动画仍然很陌生！不，就这么简单。