可以在css3背景图片中添加多少图片？

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

snow_big，snow_medium，snow_small，snow_man，树1和tree2

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

.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使用多个背景的任何限制？
谢谢

来源

2014-01-06 Ashish Panwar

作为一种解决方法，您可以在伪元素之前和之后设置图像。 – vals

请勿在@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;} 
    }

来源

2014-01-06 07:21:44 Morven

是的，你是对的，这是工作。我改变像素的百分比，然后它的工作.....感谢您的帮助:) –

不客气:) – Morven

根据W3C Specification，没有多个背景图像的限制。

但是，更多图像需要更多的加载时间。你确定要这么做吗？

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

来源

2014-01-06 05:55:55 Raptor

那么为什么它不在IE10中工作，当我在那里添加一个图像 –

你能展示一个JSFiddle吗？ – Raptor

可以在css3背景图片中添加多少图片？

回答

相关问题