我有一个关于在Chrome SVG背景转换问题的问题。 它工作正常和在Firefox，Safari和Internet Explorer的流畅，但无法在Chrome。 当我徘徊在按钮，它首先显示更大SVG和比它降级到所需的大小。 它除了Chrome的其他所有浏览器中工作顺利。
请检查 ：
jfiddle
.button { background: rgba(0, 0, 0, 0.6) url('https://cdn.mediacru.sh/b/bnN8POn3lz8M.svg') top left no-repeat; background-position: center; background-size: 100% !important; width: 200px; height: 200px; display: block; -webkit-transition: all 0.2s ease; -moz-transition: all 0.2s ease; transition: all 0.2s ease; } .button:hover { background: rgba(0, 0, 0, 0.9) url('https://cdn.mediacru.sh/y/ypwpa6pIMXdX.svg') top left no-repeat; }
<a class="button" href="#"></a>
OK ......这是在转型。 当这些行被注释掉了，它的工作原理没有变，但没有跳动施胶效果。
更改all在过渡到opacity似乎在Chrome中工作，但我不知道这是你想要的效果。
-webkit-transition: opacity 0.2s ease;
-moz-transition: opacity 0.2s ease;
transition: opacity 0.2s ease;
不幸的是，我在一个固定的首次尝试是动画的背景图像和不能使用的背景图像过渡; 看动画属性的W3C名单 。
这似乎是与Chrome浏览器实现新的CSS3图片规范规则转换图像的错误。
作为@rfornal指出 ，在原来的CSS转换规范 不包括背景图像作为动画属性。 因此图像会立即转换，无论任何转换设置。 然而，最新的编辑器的CSS的图片3级规范的草案不定义如何转型图像的规则 。 这些规则建议浏览器应该从一而它们之间的衰落变换图像的大小到其他。
到目前为止，图像转换只被在Chrome（和Opera，它使用Chrome的眨眼渲染引擎），这就是为什么没有其他的浏览器有什么问题来实现。
为了防止Chrome尝试任何幻想与图像过渡，明确指出要转型，而不是使用其性质transition: all 。
.button { background: rgba(0, 0, 0, 0.6) url('https://cdn.mediacru.sh/b/bnN8POn3lz8M.svg') top left no-repeat; background-position: center; background-size: 100% !important; width: 200px; height: 200px; display: block; -webkit-transition: all 0.2s ease; -moz-transition: all 0.2s ease; transition: all 0.2s ease; /* reset to only transition the specific properties you want to change, NOT including background-image */ -webkit-transition-property: background-color, background-position; transition-property: background-color, background-position; } .button:hover { background: rgba(0, 0, 0, 0.9) url('https://cdn.mediacru.sh/y/ypwpa6pIMXdX.svg') top left no-repeat; }
<a class="button" href="#"></a>
