css3 background-image 中可以添加多少张图片？答案

【问题标题】：how many images can add in css3 background-image?css3 background-image 中可以添加多少张图片？
【发布时间】：2014-01-23 11:52:41
【问题描述】：

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

snow_big、snow_medium、snow_small、snow_man、tree1 和 tree2

如果只使用 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 中使用多个背景有什么限制吗？？
谢谢

【问题讨论】：

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

标签： css animation

【解决方案1】：

不要对@keyframes 上的背景位置使用百分比(%) 值。请改用像素（px）值。当您使用百分比时，动画在 IE 上停止工作，而在其他浏览器上仍然有效。我在 IE 和 chrome 上的 jsfiddle 上对此进行了实验。看一看。即使在 IE 上，所有 6 张图像都是动画。 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;}
    }

【讨论】：

是的，你说得对，它的工作。我将百分比更改为像素然后它的工作.....感谢您的帮助:)

【解决方案2】：

根据W3C Specification，没有多张背景图片的限制。

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

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

【讨论】：

那么为什么它不能在 IE10 中工作，当我在其中添加一张图片时