可以在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背景圖片中添加多少圖片？

回答

相關問題