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

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

根据规范，

background-image

不是可动画或可转换的属性。但这似乎并没有说明在将其用作过渡或动画的一部分时应如何处理或如何处理。因此，每个浏览器似乎对其处理方式有所不同。Chrome（Webkit）显示背景图片时，Firefox和IE似乎无能为力。

oli.jp上的文章中的以下引号提供了一些有趣的信息：

尽管在撰写本文时CSS背景和边界模块第3级编辑草稿对背景图像说“可动画处理：否”，但Chrome 19
Canary中出现了对CSS中的交叉渐变图像的支持。在获得广泛支持之前，可以通过图像精灵和背景位置或不透明性来伪造这一点。要为渐变设置动画，它们必须为同一类型。

从表面上看，Firefox和IE似乎可以正确地处理它，而Chrome却不能。但是，这并不是那么简单。在处理背景图像而不是动画时，Firefox似乎自相矛盾。虽然转变

background-image

，它显示了紧接第二图像（

hover

第一

div

，而动画的同时，第二图像不会被显示在所有的片段）（

hover

第二

div

的片段）。

因此，结论是 最好不要

background-image

在关键帧内 设置
。相反，我们必须使用

background-position

或

opacity

喜欢指定的@oli.jp。

div {  background-image: url(https://placehold.it/100x100);  height: 100px;  width: 100px;  margin: 10px;  border: 1px solid;}div:nth-of-type(1) {  transition: background-image 1s ease;}div:nth-of-type(1):hover {  background-image: url(https://placehold.it/100/123456/ffffff);}div:nth-of-type(2):hover {  animation: show-img 1s ease forwards;}@keyframes show-img {  to {    background-image: url(https://placehold.it/100/123456/ffffff);  }}<div></div><div></div>

---

如果您有多个图像应在关键帧中以不同的百分比显示，那么最好在开始时将所有这些图像添加到元素上，并对它们的位置进行动画处理，如下面的代码片段所示。这
在Firefox，Chrome和IE中以相同的方式工作
。

div {  background-image: url(https://placehold.it/100x100), url(https://placehold.it/100/123456/ffffff);  background-size: 100% 100%;  background-repeat: no-repeat;  background-position: 0px 0px, 100px 0px;  height: 100px;  width: 100px;  margin: 10px;  border: 1px solid;}div:hover {  animation: show-img 1s steps(1) forwards;}@keyframes show-img {  to {    background-position: -100px 0px, 0px 0px;  }}<div></div>

或者，如下面的代码片段所示。基本上，每个图像的大小与容器

background-size

设置的大小相同，

100%100%

但由于给定的时间与容器的大小相同，因此在任何给定的时间仅显示一个图像。之所以显示第一个图像之间

0%

，

50%

是因为它在

0px,0px

（左上角），而第二个图像在

100px,0px

（右边界外）。在

50.1%

，第一张图片在

-100px,0px

（位于左边框外），第二张图片在

0px,0px

，因此它是可见的。

div {  background-image: url(https://picsum.photos/id/0/367/267), url(https://picsum.photos/id/1/367/267);  background-size: 100% 100%;   background-repeat: no-repeat;  background-position: 0px 0px, 100px 0px;  height: 100px;  width: 100px;  margin: 10px;  border: 1px solid;  animation: show-img 5s ease forwards;}@keyframes show-img {  0%, 50%{    background-position: 0px 0px, 100px 0px;   }  50.1%, 100% {    background-position: -100px 0px, 0px 0px;   }}<div></div>