是的:)

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)

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

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

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

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

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

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

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

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

所有功劳都归他:鼓掌:

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

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

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

如果你的背景是白色或黑色，@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>

我想我有一个解决方案，这是a)正是你在5年前寻找的，b)比这里的其他代码选项更简单一点。

对于任何白色png(例如，透明背景上的白色图标)，您可以添加::after选择器来重新上色。

.icon {
    background: url(img/icon.png); /* Your icon */
    position: relative; /* Allows an absolute positioned psuedo element */
}

.icon::after{
    position: absolute; /* Positions psuedo element relative to .icon */
    width: 100%; /* Same dimensions as .icon */
    height: 100%;
    content: ""; /* Allows psuedo element to show */
    background: #EC008C; /* The color you want the icon to change to */
    mix-blend-mode: multiply; /* Only apply color on top of white, use screen if icon is black */
}

查看代码依赖(在悬停上应用颜色交换):http://codepen.io/chrscblls/pen/bwAXZO