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

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

在大多数浏览器中，你可以使用过滤器:

在<img>元素和其他元素的背景图像上 并在CSS中静态设置它们，或者使用JavaScript动态设置它们

请看下面的演示。

< img >元素

你可以把这个技巧应用到<img>元素上:

#original， #changed { 宽度:45%; 填充:2.5%; 浮:左; ｝ #{改变 -webkit-filter:色调旋转(180度); 滤镜:色调旋转(180度); ｝ <img id="original" src="http://i.stack.imgur.com/rfar2.jpg" /> <img id="changed" src="http://i.stack.imgur.com/rfar2.jpg" />

背景图片

你可以把这个技巧应用到背景图像上:

#original， #changed { 背景:url (http://i.stack.imgur.com/kaKzj.jpg); background-size:封面; 宽度:30%; 利润率:0 10% 0 10%; padding-bottom: 28%; 浮:左; ｝ #{改变 -webkit-filter:色调旋转(180度); 滤镜:色调旋转(180度); ｝ < div id = "原始" > < / div > < div id = "改变" > < / div >

JavaScript

你可以使用JavaScript在运行时设置一个过滤器:

var element = document.getElementById("changed"); Var过滤器= '色调-旋转(120度)饱和(2.4)'; 元素。Style ['-webkit-filter'] = filter; 元素。Style ['filter'] = filter; #original， #changed { 利润率:0 10%; 宽度:30%; 浮:左; 背景:url (http://i.stack.imgur.com/856IQ.png); background-size:封面; padding-bottom: 25%; ｝ < div id = "原始" > < / div > < div id = "改变" > < / div >

img标签有一个和其他标签一样的background属性。如果你有一个透明形状的白色PNG，就像一个模板，那么你可以这样做:

<img src= 'stencil.png' style= 'background-color: red'>

你可以使用-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">

源

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

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

例如，我需要PNG的颜色为#1a9790

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

filter: invert(48%) sepia(13%) saturate(3207%) hue-rotate(130deg) brightness(95%) contrast(80%);

PS:代码依赖是基于这里的MultiplyByZer0的精彩回答:如何仅使用CSS过滤器将黑色转换为任何给定的颜色

所有功劳都归他:鼓掌:

试试这个:

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