动画背景图像之间的变化？

Question

我在我的网站上使用绿色图像作为重复背景图块。单击元素时，背景将变为蓝色重复图像。

我想为颜色变化设置动画。这可以用CSS3完成吗？一种解决方案是使用黑白图像作为可填充图案并使用CSS3进行着色吗？

Answer 1

不要使用纯色的图案background-image，而是给它一个透明的背景。这将允许您使用CSS3转换background-color以实现相同的效果：

DEMO：http://jsfiddle.net/yLLNa/

CSS

html {
    background-color: red;
    transition: background-color 1s linear;
}

html:hover {
    background-color: blue;
}