CSS过滤器在悬停时改变图像像素的颜色答案

【问题标题】：CSS filter to change color of image pixels on hoverCSS过滤器在悬停时改变图像像素的颜色
【发布时间】：2021-08-03 20:02:11
【问题描述】：

是否有可以将图像的所有像素更改为不同颜色的 CSS 过滤器？

我找到了这个，但不一样：

How to change the color of an image on hover

我找到了这份指南，它从灰度到彩色或从彩色到灰度。

https://robinroelofsen.com/change-images-grayscale-color-hover

它可能如下所示：

.myClass :hover {
    filter: color(blue);
}

要求：使用 CSS（无 JS），将现有图像像素的过滤器更改为另一种颜色。

https://developer.mozilla.org/en-US/docs/Web/CSS/filter

【问题讨论】：

像每个像素一样只是一些随机颜色？就像你说的“这个但不一样”你在寻找什么不同？不确定您到底在问什么，但如果它不在some specs 范围内，可能有助于展示您所追求的示例。
你的意思是让所有图像一种颜色？
是的，您是否只是在叠加后才能提供类似棕褐色的颜色效果？
@TemaniAfif 是的。如果图像是红色的，那么我想让它变成蓝色。 tint 或 hue 之类的过滤器可能有效，但我没有看到。或者不是一个直截了当的。有一个色调旋转，它的旋转数像filter: rotation(90)，但我正在寻找filter: hue(lightblue)
检查这个：stackoverflow.com/a/50942954/8620333

标签： html css css-filters

【解决方案1】：

您可以使用 svg 过滤器，如 here 所示。如果你想玩不同的过滤器，你可以试试here。

【讨论】：

【解决方案2】：

也许您可以使用 filter: hue-rotate(xdeg) 其中 x 是 0 到 359 之间的数字，而 deg 是度数。这个过滤器将任何元素的色调旋转一定的度数，而不仅仅是图像。它使用 HSL 配色方案。

 html{
height:100%;
overflow:hidden;
background:red;
     filter:hue-rotate(180deg);
}

div {
background:#0000ff;
}

h1 {
background:#00ff00;
color:#ffff00;
}

   <!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<link href="css/light.css" rel="stylesheet" id="theme-link">
</head>
<body>
<h3>
<b>This is what I can do 
</b>
</h3>
</body>
</html>

【讨论】：