最简单的一句话对我很管用:

filter: opacity(0.5) drop-shadow(0 0 0 blue);

您可以将不透明度从0调整到1，以使颜色更亮或更暗。

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

在<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 >

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

源

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

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

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

然后把它们组合在一起:

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

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

回答是因为我在寻找解决办法。

如果你的背景是白色或黑色，@chrscblls回答中的钢笔效果很好，但我的不是。此外，这些图像是用ng-repeat生成的，所以我不能在我的css中有他们的url，而且你不能在img标签上使用::after。

所以，我想了一个变通的办法，如果人们在这里也跌倒了，我想它可能会帮助到他们。

所以我所做的几乎是一样的，只有三个主要区别:

url是在我的img标签，我把它(和一个标签)在另一个div::后将工作。 “混合-混合模式”设置为“差”，而不是“相乘”或“筛选”。 我用完全相同的值添加了一个::before，因此::after将执行::before所做的'difference'的'difference'，并取消它-self。

要改变它从黑色到白色或白色到黑色的背景颜色需要是白色。 从黑色到彩色，你可以选择任何颜色。 从白色到彩色，你需要选择你想要的颜色相反的颜色。

.divClass{
   position: relative;
   width: 100%;
   height: 100%;
   text-align: left;
}
.divClass:hover::after, .divClass:hover::before{
   position: absolute;
   width: 100%;
   height: 100%;
   background: #FFF;
   mix-blend-mode: difference;
   content: "";
}

https://codepen.io/spaceplant/pen/oZyMYG

因为我张贴了这个答案，我用不同的方法制作了另一支笔:

* { box-sizing: border-box; } body { background-color: CadetBlue; font-family: "Lato", sans-serif; text-align: center; } button { display: flex; justify-content: center; min-width: 182px; padding: 0.5em 1em; margin: 2em auto; cursor: pointer; pointer-events: auto; border-radius: 4px; border: none; background: #85b5b7; box-shadow: 0 6px #6fa8aa; } label { font-weight: 400; font-size: 24px; margin: auto 0; color: white; } .icon { height: 64px; width: 64px; background-color: white; -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat; -webkit-mask-position: left center; mask-position: left center; -webkit-mask-size: auto 48px; mask-size: auto 48px; mask-mode: luminance; -webkit-mask-image: url("https://upload.wikimedia.org/wikipedia/commons/thumb/d/d1/Bubbles-alt-icon.png/640px-Bubbles-alt-icon.png"); mask-image: url("https://upload.wikimedia.org/wikipedia/commons/thumb/d/d1/Bubbles-alt-icon.png/640px-Bubbles-alt-icon.png"); } button label span { color: #395f60; } button:hover { color: #395f60; transform: translatey(4px); box-shadow: 0 2px #6fa8aa; } button:hover .icon { background-color: #395f60; } <button> <div class="icon"></div> <label> white to <span>color</span></label> </button>

为了字面上改变颜色，你可以使用-webkit-filter来合并CSS转换，当有事情发生时，你可以调用你选择的-webkit-filter。例如:

img {
    -webkit-filter:grayscale(0%);
    transition: -webkit-filter .3s linear;
    }
img:hover 
    {
    -webkit-filter:grayscale(75%);
    }