2具有单独动画的背景图像？

Question

这让我烦恼，因为我知道这是可能的，我只是不知道如何正确地写它。这是我的愿景的形象：

到目前为止，在我的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动画不适用于它？

谢谢！

Answer 1

你这样做：

Fiddle

您的相关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%; }
}

希望有所帮助！