Question

我试图在css background-image中添加多个背景来创建一个小雪动画。我有6张图片：

snow_big，snow_medium，snow_small，snow_man，tree1和tree2

如果仅使用4个图像用于动画，我的动画效果很好，但是当我添加更多图像时。雪动画停止工作它的唯一动画从左到右但不是从上到下或有时可能停止。这种情况只发生在 ，但其他浏览器的工作我不知道我检查顺序，但它很好。这是使用的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 Specification，多个背景图片没有限制。

然而，更多图像需要更多的加载时间。你确定要这样做吗？

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

在css3 background-image中可以添加多少图像？

2 个答案: