可以在 CSS3 背景图像中添加多少图像

Question

我试图在css背景图像中添加多个背景以创建一个小的雪动画。我有 6 张图片：

snow_big、snow_medium、snow_small、snow_man、树1和树2

如果是仅使用 4 张图像进行动画，我的动画工作得很好，但是当我添加更多图像时。 雪地动画停止工作，它唯一的动画从左到右，但不是从上到下，或者有时可能会停止。这只发生在IE10中，但其他浏览器它的工作我不知道我检查了顺序，但它很好。以下是我使用的 CSS 代码：

.xmas_theme_animation {
    background-color:navy;
    height:115px;
    width:345px;
    background-image: url('../images/snow_big.png')
    ,url('../images/snow_medium.png')
    ,url('../images/snow_small.png')
    ,url('../images/snow1_snowman.png')
    ,url('../images/tree1.png')
    ,url('../images/tree2.png');
    background-repeat: repeat, repeat, repeat, no-repeat, no-repeat, no-repeat;
    background-position: 0 0, 0 0, 0 0, 6% bottom, 20% bottom, 40% bottom;    
    animation: snowfall 10s infinite linear;
}
@keyframes snowfall {
    from {background-position: 0 -340px, 0 -172.5px, 0 0px, 6% bottom, 20% bottom, 40% bottom;  }
    to {background-position: 0 345px, 661px 172.5px, 0 345px, 6% bottom, 20% bottom, 40% bottom;}
}

那么在CSS中使用多个背景有什么限制吗？
谢谢

Answer 1

不要在@keyframes上使用百分比（%）值作为背景位置。请改用像素 （px） 值。使用百分比时，动画在 IE 上停止工作，而在其他浏览器上仍有效。我在IE和chrome上的jsfiddle上进行了实验。看一看。所有 6 张图像都是动画的，即使在 IE 上也是如此。http://jsfiddle.net/qLtxr/

.xmas_theme_animation {
        background-color:navy;
        width:800px;
        height: 500px;
        background-image: url('http://blogs.villagevoice.com/runninscared/at-twitter_reasonably_small.png'),
        url('http://blogs.villagevoice.com/runninscared/at-twitter_reasonably_small.png'),
        url('http://blogs.villagevoice.com/runninscared/at-twitter_reasonably_small.png'),
        url('http://blogs.villagevoice.com/runninscared/at-twitter_reasonably_small.png'),
        url('http://blogs.villagevoice.com/runninscared/at-twitter_reasonably_small.png'),
        url('http://blogs.villagevoice.com/runninscared/at-twitter_reasonably_small.png');
        background-repeat: no-repeat, no-repeat, no-repeat, no-repeat, no-repeat, no-repeat;
        background-position: 0 0, 0 0, 0 0, 6% bottom, 20% bottom, 40% bottom;  
        -webkit-animation: snowfall 10s  linear infinite;
        animation: snowfall 10s  linear infinite;
    }
    @-webkit-keyframes snowfall {
      from {background-position:0 -340px, 0 -172px, 0 0px, 0 0, 0 0, 0 0;  }
      to {background-position: 0 345px, 661px 172px, 0 345px, 60px 400px, 200px 100px, 400px 150px;}
    }
    @keyframes snowfall {
      from {background-position: 0 -340px, 0 -172px, 0 0px, 0 0, 0 0, 0 0;  }
      to {background-position: 0 345px, 661px 172px, 0 345px, 60px 400px, 200px 100px, 400px 150px;}
    }

Answer 2

根据 W3C 规范，多个背景图像没有限制。

但是，更多的图像需要花费更多的加载时间。您确定要这样做吗？

另一方面，IE9+支持多个背景图像。您的页面是否使用兼容模式？