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

时间：2018-05-30 12:36:57

标签： html css mask

这是一个艰难的。我们假设我有div，具有特定尺寸（width和height）和background-color: pink;。现在让我们说我有一个图标，一个png文件（或svg或其他任何东西），我想要的图像是＆＃34;挖掘＆＃34;进入背景色。 换句话说，我希望图标以透明方式显示，粉红色显示在它周围。像这样： example 它就像mask-image属性，恰恰相反。

详细说明：

  • 不需要浏览器兼容性（它不适合生产用途）
  • 我不能使用Javascript或JQ（html / css）
  • 当然我无法编辑png文件（以反转透明度和颜色;））

以下是两个与背景颜色匹配的PNG：

stackoverflow pacman

相关：

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

1 个答案:

答案 0 :(得分：0)

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

图像不会在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>

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

相关问题
最新问题