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

试试这个:

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

你可以使用-webkit-filter和filter来使用过滤器: 过滤器对于浏览器来说相对较新，但根据以下CanIUse表:https://caniuse.com/#feat=css-filters，超过90%的浏览器支持过滤器

你可以将图像更改为灰度，深褐色和更多(请看示例)。

所以你现在可以用滤镜改变PNG文件的颜色。

body { background-color:#03030a; min-width: 800px; min-height: 400px } img { width:20%; float:left; margin:0; } /*Filter styles*/ .saturate { filter: saturate(3); } .grayscale { filter: grayscale(100%); } .contrast { filter: contrast(160%); } .brightness { filter: brightness(0.25); } .blur { filter: blur(3px); } .invert { filter: invert(100%); } .sepia { filter: sepia(100%); } .huerotate { filter: hue-rotate(180deg); } .rss.opacity { filter: opacity(50%); } <!--- img src http://upload.wikimedia.org/wikipedia/commons/thumb/e/ec/Mona_Lisa%2C_by_Leonardo_da_Vinci%2C_from_C2RMF_retouched.jpg/500px-Mona_Lisa%2C_by_Leonardo_da_Vinci%2C_from_C2RMF_retouched.jpg --> <img alt="Mona Lisa" src="https://images.pexels.com/photos/40997/mona-lisa-leonardo-da-vinci-la-gioconda-oil-painting-40997.jpeg?auto=compress&cs=tinysrgb&dpr=3&h=750&w=1260" title="original"> <img alt="Mona Lisa" src="https://images.pexels.com/photos/40997/mona-lisa-leonardo-da-vinci-la-gioconda-oil-painting-40997.jpeg?auto=compress&cs=tinysrgb&dpr=3&h=750&w=1260" title="saturate" class="saturate"> <img alt="Mona Lisa" src="https://images.pexels.com/photos/40997/mona-lisa-leonardo-da-vinci-la-gioconda-oil-painting-40997.jpeg?auto=compress&cs=tinysrgb&dpr=3&h=750&w=1260" title="grayscale" class="grayscale"> <img alt="Mona Lisa" src="https://images.pexels.com/photos/40997/mona-lisa-leonardo-da-vinci-la-gioconda-oil-painting-40997.jpeg?auto=compress&cs=tinysrgb&dpr=3&h=750&w=1260" title="contrast" class="contrast"> <img alt="Mona Lisa" src="https://images.pexels.com/photos/40997/mona-lisa-leonardo-da-vinci-la-gioconda-oil-painting-40997.jpeg?auto=compress&cs=tinysrgb&dpr=3&h=750&w=1260" title="brightness" class="brightness"> <img alt="Mona Lisa" src="https://images.pexels.com/photos/40997/mona-lisa-leonardo-da-vinci-la-gioconda-oil-painting-40997.jpeg?auto=compress&cs=tinysrgb&dpr=3&h=750&w=1260" title="blur" class="blur"> <img alt="Mona Lisa" src="https://images.pexels.com/photos/40997/mona-lisa-leonardo-da-vinci-la-gioconda-oil-painting-40997.jpeg?auto=compress&cs=tinysrgb&dpr=3&h=750&w=1260" title="invert" class="invert"> <img alt="Mona Lisa" src="https://images.pexels.com/photos/40997/mona-lisa-leonardo-da-vinci-la-gioconda-oil-painting-40997.jpeg?auto=compress&cs=tinysrgb&dpr=3&h=750&w=1260" title="sepia" class="sepia"> <img alt="Mona Lisa" src="https://images.pexels.com/photos/40997/mona-lisa-leonardo-da-vinci-la-gioconda-oil-painting-40997.jpeg?auto=compress&cs=tinysrgb&dpr=3&h=750&w=1260" title="huerotate" class="huerotate"> <img alt="Mona Lisa" src="https://images.pexels.com/photos/40997/mona-lisa-leonardo-da-vinci-la-gioconda-oil-painting-40997.jpeg?auto=compress&cs=tinysrgb&dpr=3&h=750&w=1260" title="opacity" class="rss opacity">

源

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

相反，我创建了一个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 >

当将一张图片从黑到白，或从白到黑时，色调旋转滤镜不起作用，因为黑色和白色在技术上不是颜色。相反，黑白颜色的变化(从黑到白或反之)必须使用invert filter属性来完成。

.img1 { 过滤器:反转(100%); ｝

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

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

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

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

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