html - 带背景位置的 CSS3 过渡

Question

我将小图片放入大图片中，并使用 background-position 设置小图片在大图片中的位置。

当#nav_left_home为onhover时，背景图像位置从0 32px变为0 0 .

#nav_left_home {
    background-position: 0 32px;
    background-image: url('../img/nav_left.png');
    transition: background-image 0.5s ease-in-out;
}

#nav_left_home:hover {
    background-position: 0 0;
}

使用上面的代码，当悬停时，红色房子会向上移动，白色房子会出现在红色房子下面并向上移动，直到替换位置。

但我只想改变图像的颜色(位置不移动)，就像 color 随着过渡而改变一样。

Answer 1

我知道实现此目的的唯一方法是将图像切片为“ mask ”并使用 CSS 在不同背景颜色之间进行转换。通过蒙版，我的意思是您的图标的颜色部分将保持透明，以形成一种位于纯色背景之上的切口。