CSS css过滤器使元素成为一种颜色
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/27999597/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
css filter to make elements one color
提问by mahemoff
The following CSS filter:
以下 CSS 过滤器：
filter: brightness(0) invert(1);
makes elements all-white (source). Neat, but is there a way to make them another color instead, e.g. blue? This is for situations where there is a transparent background, e.g. an icon. I want to make the icon one arbitrary color.
使元素全白（source）。整洁，但是有没有办法让它们变成另一种颜色，例如蓝色？这适用于有透明背景（例如图标）的情况。我想让图标成为一种任意颜色。
回答by Mark Meyer
The hue-rotate()filter affects all colors however so it won't turn a full color image into a one color image. Rather it will move all the colors around the color wheel.
然而，hue-rotate()过滤器会影响所有颜色，因此它不会将全色图像变成单色图像。相反，它会移动色轮周围的所有颜色。
However you can hack a solution by converting to grayscale, adding sepia and then rotating the hueThis make an image look like a single hue shaded green:
但是，您可以通过转换为灰度、添加棕褐色然后旋转色调来破解解决方案。这使图像看起来像绿色阴影的单一色调：
filter: grayscale(100%) sepia(100%) hue-rotate(90deg);
If you care dealing with vector work like an icon that you will use a lot, you might consider converting it to SVG, then you can color it with plain css. https://icomoon.iocan help with this.
如果您关心处理矢量工作，例如您将经常使用的图标，您可以考虑将其转换为 SVG，然后您可以使用纯 css 为其着色。https://icomoon.io可以帮助解决这个问题。
回答by Paul Chamberlain
Adding contrast(0)as the first step will flatten the icon's colors to a uniform gray, which I needed for my purposes. I also needed to fiddle with brightnessand saturateto hit my target color.
添加contrast(0)作为第一步会将图标的颜色展平为统一的灰色，这是我需要的。我还需要摆弄brightness并saturate达到我的目标颜色。
filter: contrast(0) sepia(100%) hue-rotate(116deg) brightness(1.4) saturate(0.28);
回答by Michael Mullany
If you reference an SVG filter from your CSS, then you can get a specific color. SVG filter snippet below. For your specific color replace the .7/.4/.5 with the unitized value of your RGB values.
如果您从 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>
hue-rotate() is a very impaired filter since it doesn't operate in HSL space. It's an RGB approximation which tends to clip saturated colors badly.
Hue-rotate() 是一个非常受损的过滤器，因为它不在 HSL 空间中运行。这是一个 RGB 近似值，它往往会严重剪裁饱和的颜色。
