Css 关键帧中的背景图像不会显示在Firefox或Internet Explorer中

我在我的网站上有几个动画，我刚刚意识到它们甚至没有出现在Firefox或Internet Explorer中。我在关键帧中有

背景图像

。我这样做是因为我在动画中有不同百分比的不同图像

为什么在Firefox和Internet Explorer中，

背景图像

不显示在关键帧内，有没有办法使其工作？

根据，

背景图像

不是可设置动画或可转换的属性。但它似乎没有说明当它被用作过渡或动画的一部分时，处理应该是什么或如何。正因为如此，每个浏览器的处理方式似乎都有所不同。当Chrome（Webkit）显示背景图像时，Firefox和IE似乎什么也没做

中的以下引用提供了一些有趣的信息：

虽然CSS背景和边框模块3级编辑器的草稿在撰写本文时对背景图像说“可设置动画：否”，但Chrome 19 Canary中出现了对CSS中交叉淡入淡出图像的支持。在得到广泛支持之前，这可以通过图像精灵和背景位置或不透明度来伪造。要设置渐变动画，它们必须是相同的类型

从表面上看，Firefox和IE似乎处理得很好，而Chrome则不然。但是，事情并非如此简单。Firefox在处理背景图像的转换而不是动画时似乎自相矛盾。转换

背景图像

时，它会立即显示第二个图像（

悬停

片段中的第一个

div

），而在设置动画时，根本不会显示第二个图像（

悬停

片段中的第二个

div

）

因此，结论是，最好不要在关键帧内设置背景图像。相反，我们必须使用

背景位置

或

不透明度

，就像指定的@oli.jp一样

div{
背景图片：url(https://placehold.it/100x100);
高度：100px；
宽度：100px；
利润率：10px；
边框：1px实心；
}
分区：第n个类型（1）{
过渡：背景图像1s轻松；
}
div:n类型（1）：悬停{
背景图片：url(https://placehold.it/100/123456/ffffff);
}
div:n类型（2）：悬停{
动画：显示img 1s向前移动；
}
@关键帧显示img{
到{
背景图片：url(https://placehold.it/100/123456/ffffff);
}
}

感谢您对此进行澄清！我对如何使多图像场景工作感到有点困惑，因为我在您的代码片段中没有看到任何变化。比方说，我有两个不同的图像，一个显示的是

0%，50%

，另一个显示的是

50.1%，100%

…我该如何更改图像？@Becky:我在片段中添加了一个不同的示例（参考最后一个片段）。原来的一个只会改变悬停时的图像，所以也许这就是为什么你不清楚：）是的，它帮助了很多！谢谢你一直以来对我的帮助。@Becky:关键帧中有一些不必要的

背景图像：无。是固定的小提琴。@Becky:你应该使用图像的实际宽度来计算位置。我使用了100px，因为这是我的图像宽度。是宽度增加的样品。适当调整。