Question

我需要在悬停时将图标的颜色从灰色（＃b7b7b7 ）更改为珊瑚色（＃b45d64 ）。

我发现使用CSS过滤器使珊瑚变成灰色很容易。所以现在我使用反向解决方案，在Photoshop中将所有图标的颜色更改为珊瑚，并将CSS过滤器设置为灰色，如下面的代码示例所示，并在悬停时使用无值禁用CSS过滤器。

但我想知道是否有任何算法或方法可以从灰色中获取特定颜色，如＃b45d64 。我使用棕褐色并手动播放亮度，饱和度和色调旋转滤镜，但我有一种更简单的方法来做到这一点（我的意思是更容易计算亮度，饱和度和色调旋转以使用棕褐色从灰色获得＃b45d64）？

.makegray:hover{
    -webkit-filter: brightness(1.72) saturate(0) hue-rotate(0deg);
    filter: brightness(1.72) saturate(0) hue-rotate(0deg);
}

.makecoral:hover{
    -webkit-filter: sepia(1) brightness(0.54) saturate(2) hue-rotate(305deg);
    filter: sepia(1) brightness(0.54) saturate(2) hue-rotate(305deg);
}

<img src="http://dummyimage.com/200x200/b7b7b7/fff.png&text=hsla(0,00x25,720x25)" class="makecoral" alt=""><br>
<img src="http://dummyimage.com/200x200/b45d64/fff.png&text=hsl(355,+370x25,+540x25)" class="makegray" alt="">

Answer 1

如果从CSS引用SVG过滤器，则可以获得特定颜色。下面的SVG过滤器片段。对于您的特定颜色，将.7 / .4 / .5替换为RGB值的单位值。

<filter id="colorme" color-interpolation-filters="sRGB">
  <feColorMatrix type="matrix" values="0 0 0 0 .7  0 0 0 0 .4  0 0 0 0 .5  0 0 0 1 0"/>
</filter>

有没有办法使用CSS过滤器属性从灰色获取特定颜色？

1 个答案: