CSS：背景颜色和图标 - 反转蒙版答案

【问题标题】：CSS: background-color and icon - inverting masksCSS：背景颜色和图标 - 反转蒙版
【发布时间】：2018-11-09 07:41:10
【问题描述】：

这是一个艰难的过程。假设我有div，具有特定大小（width 和height）和background-color: pink;。现在假设我有一个图标、一个 png 文件（或 svg 或任何东西），并且我希望图像“挖掘”到背景颜色中。换句话说，我希望图标以透明的方式显示，并且周围都是粉红色。像这样：就像mask-image 属性一样，正好相反。

详情：

无需考虑浏览器兼容性（不适用于生产用途）
我不能使用 Javascript 和 JQ (html / css)
当然我不能编辑 png 文件（以反转透明度和颜色；））

这里有两个PNG来匹配背景颜色：

相关：

这不像 png 只是一个字符：codepen。
这不仅仅是使用mask-image：jsfiddle
https://tympanus.net/codrops/css_reference/mask-image/
https://alligator.io/css/masking-with-mask-image/
https://codepen.io/yoksel/full/fsdbu/

你们有任何线索来实现这种行为吗？如果您需要更多详细信息，请告诉我。

【问题讨论】：

投反对票时，您可能需要在评论部分详细说明，这样我就可以通过这个问题了解我可以改进的地方；）
听起来像家庭作业xD
:') 甚至没有关闭！我正在挖掘mask-image 属性以在我公司的 Intranet 上尝试一些东西，我想“嘿，我怎样才能反转这个/做相反的事情？”
这听起来就像是让别人为你编写代码，但需要额外的步骤。

标签： html css mask

【解决方案1】：

在div 内部时，您可能希望在image 上使用filter: invert(1);：

图像不会在 div 内部进行挖掘，但如果 div 后面的颜色相同，则在视觉上会起作用。（我在身体上添加了不同的颜色来说明这种不受欢迎的行为）

body{
  background: #ddd;
}

div {
  width: 200px;
  height: 140px;
  background-color: pink;
}

div img {
  /* You may want to add brightness(0) before invert for some images */
  filter: invert(1); 
}

<body>
  <div class="img_container">
    <img src="https://image.flaticon.com/icons/png/128/61/61072.png" />
  </div>
  <p>Original image:</p>
  <img src="https://image.flaticon.com/icons/png/128/61/61072.png" />
</body>

请注意，我没有使用您的图片，因为它不仅是黑色和透明的。

【讨论】：

我认为“透明”意味着他们实际上想要展示背后的一切。
好的，你的 sn-p 看起来正是我想要的。但是，为什么黑色以外的其他颜色的图标不起作用？
@4wk_ 尝试使用您提供的第一张图片编辑我的 sn-p。我的手机打不通。