如何防止转换背景图像时出现的断断续续？

Question

我在元素上使用<selector xmlns:android="http://schemas.android.com/apk/res/android"> <item android:state_pressed="true" android:color="@android:color/white"/> <item android:state_selected="true" android:color="@android:color/white"/> <item android:state_focused="true" android:color="@android:color/white"/> <item android:state_checked="false" android:color="@android:color/white"/> <item android:color="#000000" /></selector> ，我写了一些JS，每10秒更改一次background-size: cover; transition: background-image 4s;属性。

元素在webkit浏览器中转换背景图像，但图像在转换时会抖动。

我该如何防止这种情况？

这是一个JSFiddle，其中包含行为示例：

http://jsfiddle.net/michaelynch/x60gL1p6/

Answer 1

而不是使用background-size：cover;，请使用％like background-size：100％190％;