试试这个:

 -webkit-filter: brightness(0) invert(1);
 filter: brightness(0) invert(1); 

是的:)

Surfin' Safari - Blog Archive » CSS Masks WebKit now supports alpha masks in CSS. Masks allow you to overlay the content of a box with a pattern that can be used to knock out portions of that box in the final display. In other words, you can clip to complex shapes based off the alpha of an image. [...] We have introduced new properties to provide Web designers with a lot of control over these masks and how they are applied. The new properties are analogous to the background and border-image properties that already exist. -webkit-mask (background) -webkit-mask-attachment (background-attachment) -webkit-mask-clip (background-clip) -webkit-mask-origin (background-origin) -webkit-mask-image (background-image) -webkit-mask-repeat (background-repeat) -webkit-mask-composite (background-composite) -webkit-mask-box-image (border-image)

我需要一个特定的颜色，所以滤镜不适合我。

相反，我创建了一个div，利用CSS多个背景图像和线性梯度函数(它自己创建图像)。如果你使用叠加混合模式，你的实际图像将与生成的“渐变”图像混合，包含你想要的颜色(这里，#BADA55)

.colored-image { background-image: linear-gradient(向右，#BADA55， #BADA55)， url("https://i.imgur.com/lYXT8R6.png"); background-blend-mode:覆盖; background-size:包含; 宽度:200 px; 身高:200 px; ｝ < div class = "的" > < / div >

如果图像像矢量图像一样简单，可以转换为SVG并在那里进行CSS更改。 另一种选择是将图像制作成PNG，并将特定的颜色更改为透明(如裁剪)，并使用CSS更改背景颜色。

使用这个很棒的codedeen示例，您插入十六进制颜色值，它返回所需的过滤器，将此颜色应用到png

CSS过滤器生成器转换从黑色到目标十六进制颜色

例如，我需要我的png颜色为#EF8C57

然后你必须对你的PNG应用下面的过滤器 结果:

filter: invert(76%) sepia(30%) saturate(3461%) hue-rotate(321deg) brightness(98%) contrast(91%);

你可以使用滤镜:色调旋转(Ndeg)，但如果图像是黑白的，色调将永远不会改变。

但是，你可以把它和滤镜结合起来:sepia(100)。这将为图像添加色彩，色彩旋转滤镜可以改变。

Sepia增加了一个相当不饱和的颜色，所以增强一点滤镜:饱和(50);这使得它的颜色更深，色彩旋转可以更好地工作。

然后把它们组合在一起:

滤镜:棕褐色(100)饱和(50)色调旋转(280度)

然后尝试旋转的程度，直到你找到你喜欢的颜色。