多重过滤器转换

Question

我使用2 filter属性使图像在悬停时变为白色。

.uni-im img {
filter: brightness(0) invert(1);
}

我想使用过渡来获得平滑的视图。

.uni-im img {
filter: brightness(0) invert(1);
transition: filter .15s linear;
}

但这种转变适用于这两处房产。我指的是亮度的转换和反转的另一个转换
我想直接变成白色，而不看到黑色图像。纯css可以做到这一点吗

示例：

div {
background: white;
border: 1px solid #ccc;
padding: 20px;
display: inline-block;
transition: background 2s linear;
}
img {
width: 30px;
height: 30px;
transition: filter 2s linear;
}
div:hover {
background: #3F85CE;
}
div:hover img {
filter: brightness(0) invert(1);
}

<div>
<img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAEAAAABACAYAAACqaXHeAAAABGdBTUEAALGPC/xhBQAAACBjSFJNAAB6JgAAgIQAAPoAAACA6AAAdTAAAOpgAAA6mAAAF3CculE8AAAACXBIWXMAAA3WAAAN1gGQb3mcAAAAB3RJTUUH4gsGEwwX9OWpBgAAABp0RVh0U29mdHdhcmUAUGFpbnQuTkVUIHYzLjUuMTFH80I3AAAC00lEQVR4Xu2Z3UrEMBCFqyirq/iHLKggeCe6CuKFPzeuLIpXXqh4Iejb+Hq+ks7USZ3NJmltNqWrpxDczaYz53ydpGnNMhwgAAIgAAIgAAIgAAIgAAIgAAIgAAIgAAKlBJau3j8+29hI+VKp+pgBbTTt0hTjMXiuSZYsQWTgWH37lP+Y2hG1Q2oH1LhvxejiBPS5G6kz5eld0WhysHb2wF7YE3tjj9xXHGe/Ke2U6icR+zdeclhC7FmSb6oy0gvKnuqfn4TQRDHmlc49laNYuKlvk/uLcQJgRgvyzKW52DmWyHQRVumbq+BnRleArW1ZwGxbPxxJ/0iC1MYqxs8vkMxzfcq29C/bcUIAfkrEOkuCvVQU1dgwX3WGqjYIgJTviNlVy8WNtdI2ZjKUyGN0VbTuuM4tA2AWyCdn6WTZSSucf4s4cV2UsjWrFAAFfq0TuGkwdcrf3AnMVfZp7nnKvVXTQDTeeCq15zNXpQI6rtskBTx3gOE7xjW1e2ov5qpM6i/HlNicY+TuJFrOLaPft7ks68QAWPNUwGUdYyTkjdoDtVtql9R4W8qNP3Mf//ZWMzbHGDlE+1oMgFMLwIZLHCXoU5v1JUrQz7n6Hi0bJp9oP60NQC0u+S1Rfd9KYCo25JalsdBcF8DYiw977sUqTnR+vvOzYDhflAQXQSvAbiKxKcPuWh7GcoUAXMj8GaZU2FDsoXi5cC6SnlWex643JLCJNE4vugLyZ+R/duTvPrxPfX8dhrqjZQOZBo9kuo3P+ZO+FuzxUTwPTPCHOruvaT6HjPOuc+Tg3RW/PTUVwVtTJnSnyoW/t74pvXei91ZdcfYY3rXK4AUauKiCNbnVjS37WaV7kYItBO5247lk8PqUmjeGNITcS2Wq1g5qmq782LQu2w36oPDe2fsUVZlkewayl7T/OG2PVygBARAAARAAARAAARAAARAAARAAARAAgTCBLwkq2jFKY/W7AAAAAElFTkSuQmCC">
</div>

Answer 1

为了更容易看到效果，我创建了一个新的片段，其中图像的颜色是背景。

但它对您的用例也是一样的。

只需更改应用的过滤器

.test {
width: 200px;
height: 150px;
background: cyan;
margin: 20px;
transition: filter 4s;
}
.test:hover {
filter:  grayscale(1) brightness(1.5);
}

<div class="test"></div>

Answer 2

您提供的代码笔的转换设置为2s。如果缩短过渡时间，则不会看到黑色。

Ex。

div {
background: white;
border: 1px solid #ccc;
padding: 20px;
display: inline-block;
transition: background 100ms linear;
}
img {
width: 30px;
height: 30px;
transition: filter 100ms linear;
}

您也可以从图像中删除过渡。这样，背景从白色到蓝色的转换时间为.15秒，但图像将直接从蓝色切换到白色，而不首先转换到黑色。