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

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

是的:)

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 >

对我来说有效的解决方案是使用滤镜:投影

滤镜:水滴阴影的工作方式不同于常规的盒子阴影。

滤镜将阴影应用于真实形状(因此它支持透明图像)。

现在的技巧是“隐藏”真实的图像，只显示阴影。

https://jsfiddle.net/d4m8x0qb/2

请注意，我的用例是将图标的颜色修改为一种纯色，所以这种方法适合我，但可能不适用于其他用例

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

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

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

body{ background: #333 url(/images/classy_fabric.png); width: 430px; margin: 0 auto; padding: 30px; } .preview{ background: #ccc; width: 415px; height: 430px; border: solid 10px #fff; } input[type='radio'] { -webkit-appearance: none; -moz-appearance: none; width: 25px; height: 25px; margin: 5px 0 5px 5px; background-size: 225px 70px; position: relative; float: left; display: inline; top: 0; border-radius: 3px; z-index: 99999; cursor: pointer; box-shadow: 1px 1px 1px #000; } input[type='radio']:hover{ -webkit-filter: opacity(.4); filter: opacity(.4); } .red{ background: red; } .red:checked{ background: linear-gradient(brown, red) } .green{ background: green; } .green:checked{ background: linear-gradient(green, lime); } .yellow{ background: yellow; } .yellow:checked{ background: linear-gradient(orange, yellow); } .purple{ background: purple; } .pink{ background: pink; } .purple:checked{ background: linear-gradient(purple, violet); } .red:checked ~ img{ -webkit-filter: opacity(.5) drop-shadow(0 0 0 red); filter: opacity(.5) drop-shadow(0 0 0 red); } .green:checked ~ img{ -webkit-filter: opacity(.5) drop-shadow(0 0 0 green); filter: opacity(.5) drop-shadow(0 0 0 green); } .yellow:checked ~ img{ -webkit-filter: opacity(.5) drop-shadow(0 0 0 yellow); filter: opacity(.5) drop-shadow(0 0 0 yellow); } .purple:checked ~ img{ -webkit-filter: opacity(.5) drop-shadow(0 0 0 purple); filter: opacity(.5) drop-shadow(0 0 0 purple); } .pink:checked ~ img{ -webkit-filter: opacity(.5) drop-shadow(0 0 0 pink); filter: opacity(.5) drop-shadow(0 0 0 pink); } img{ width: 394px; height: 375px; position: relative; } .label{ width: 150px; height: 75px; position: absolute; top: 170px; margin-left: 130px; } ::selection{ background: #000; } <div class="preview"> <input class='red' name='color' type='radio' /> <input class='green' name='color' type='radio' /> <input class='pink' name='color' type='radio' /> <input checked class='yellow' name='color' type='radio' /> <input class='purple' name='color' type='radio' /> <img src="https://i.stack.imgur.com/bd7VJ.png"/> </div>

来源:https://codepen.io/taryaoui/pen/EKkcu