Question

我有一些图像代表由蓝色标志和透明背景组成的图标。我用css显示它们：

.icon {
    background: rgba(0, 0, 0, 0) url("images/icons/my-icon.png") no-repeat scroll 5px center;
}

我的图标如下所示：https://cdn2.iconfinder.com/data/icons/large-svg-icons-part-3/512/zoom_search_find_magnifying_glass-256.png

我希望能够使用css更改蓝色的颜色。我尝试使用CSS3的过滤功能。

我的想法是我有十六进制代码并将其转换为RGB和后来的HSL（色调，饱和度和亮度）。最后，我将为每种颜色提供0到360之间的值（一个度数）。例如，请参见此图片：http://lodev.org/cgtutor/images/hslhuecircle.jpg。

我正在使用此过滤功能：

filter: hue-rotate(220deg) saturate(100);

其中220deg是色调的int值。因此，近似的色调（最初为浮点值）为220。

举例红色：＃ff0000 色调细节是：

array(4) {
  ["hue"]=>
  int(0)
  ["saturation"]=>
  int(100)
  ["luminance"]=>
  float(50)
  ["degrees"]=>
  int(0)
}

所以css变成了：

.icon {
    background: rgba(0, 0, 0, 0) url("images/icons/my-icon.png") no-repeat scroll 5px center;
    filter: hue-rotate(0deg) saturate(100);
}

但在这种情况下，蓝色变为＃9AF8FF（不是红色）。

为了获得红色，我应该使用：

filter: hue-rotate(195deg) saturate(100);

色调旋转值可以在0到360之间，就像度数一样。在我的情况下，结果是反转的，而不是获得0度的红色，我获得了可以在195度的下一个图像上找到的值：http://lodev.org/cgtutor/images/hslhuecircle.jpg。

是否有任何css过滤器或其他解决方案可以帮助我使用css更改图像颜色？我玩过其他CSS3过滤器，但我无法将颜色更改为所需的颜色。

我有一个应用程序，用户可以选择所需的颜色，唯一的问题是现有的图像图标。

任何帮助都会很棒，期待谢谢！

Answer 1

当我写这个问题时，我发现了一个可能的解决方案。就我而言，结果是相反的。

对于红色，＃ff0000我获得0度。我意识到使用css3的滤镜hue-rotate，红色不是0，但它从180开始。因此，对于我获得的每个色调/度数值，我加180.这样，我就可以获得所需的颜色。 / p>

更改后，hsl：

array(4) {
  ["hue"]=>
  int(0)
  ["saturation"]=>
  int(100)
  ["luminance"]=>
  float(50)
  ["degrees"]=>
  int(0)
}

成为：

array(4) {
  ["hue"]=>
  int(180)
  ["saturation"]=>
  int(100)
  ["luminance"]=>
  float(50)
  ["degrees"]=>
  int(180)
}

我尝试了绿色和其他颜色，效果很好。如果您有更好的想法使用CSS更改图像颜色，不使用过滤功能“hue-rotate”，我会很高兴听到它。

修改

我找到了解决方案。

1）我正在使用上面解释的解决方案（我在学位上加180）。

2）我也在使用亮度滤镜

所以我的过滤器看起来像：

filter: hue-rotate(350deg) saturate(100) brightness(1);

此过滤器将图标的颜色更改为此颜色：＃00FFFF。所以解决方案100％工作。我正在发送颜色代码和亮度，我动态计算滤波器值。对于较暗的颜色，使用较低的亮度值（低于0.5），对于较亮的颜色，使用高于0.5的值。

如何在css中更改图像（图标＆＃39; s）颜色

1 个答案: