具有背景位置的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;
}

使用上面的代码，红房子会在onhover时向上移动，白宫将出现在红房子下方并向上移动直到更换位置。

但我只想改变图像的颜色（没有移动的位置），就像color随着过渡而改变一样。

Answer 1

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

Answer 2

您需要同时显示两个图像，并在2之间淡出。

要实现这一点，您需要在伪元素中设置备用图像，最初是透明的：

#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:after {
    content: "";
    left: 0px; 
    top: 0px;
    right: 0px;
    bottom: 0px;
    background-position: 0 0;
    background-image: url('../img/nav_left.png');
    opacity: 0;
    transition: opacity 0.5s ease-in-out;
}

#nav_left_home:hover:after {
    opacity: 1;
}