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

Question

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

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

Answer 1

与其使用纯色的 background-image block ，不如给它一个透明的背景。这将允许您使用 CSS3 转换 background-color 以达到相同的效果:

演示:http://jsfiddle.net/yLLNa/

CSS

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

html:hover {
    background-color: blue;
}