Css 背景图像之间的动画更改？

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

我想给颜色变化设置动画。这可以通过CSS3实现吗？一种解决方案是使用黑白图像作为可耕地图案，并用CSS3着色吗

---

给它一个透明的背景，而不是用纯色的瓷砖

背景图像。这将允许您使用CSS3转换
背景色
，以达到相同的效果：

演示：

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

html:hover {
    background-color: blue;
}