html - CSS 过滤器 - 颜色为蓝色但保持白色

Question

我有一个软盘图像，我想在悬停时将其重新着色为蓝色。我想知道是否有人知道如何应用这样的 CSS 过滤器来只为图像的非灰色元素着色？

当前的 CSS:

.saveIcon:hover {
    cursor: pointer;
    filter: grayscale(20%) brightness(70%) 
sepia(100%) hue-rotate(-180deg) saturate(300%) 
contrast(1);
}

图片(全尺寸):

预期结果(大概):

Answer 1

我认为一个简单的hue-rotate()会做的。只需调整程度即可获得您想要的颜色:

img {
  width: 200px;
}

img:hover {
  filter: hue-rotate(40deg);
}

<img src="/image/2P1q3.png">