如何使用css为png图像的轮廓设置颜色？

Question

我有以下图片。我已经在我的html中添加了它并给它一个类名。现在我想将黑色轮廓颜色变为白色。我怎么能用css做到这一点？

Answer 1

您可以使用filter: invert(100%)来实现此目的。

请参阅CSS filters on MDN

但请记住，只有有限的支持，所以它不适用于所有浏览器。请参阅：http://caniuse.com/#search=filter

.container {
  background-color: black;
  width: 35px;
  height: 35px;
  padding-top: 10px;
}

img {
    filter: invert(100%);

}

<div class="container">
<img src="https://i.stack.imgur.com/qiFDT.png">
</div>

Answer 2

纯CSS实际上是不可能的。

要更改图像颜色，有两个公共解决方案：

• 使用SVG通过CSS更改颜色（有关更多信息，请参阅this link）
• 使用您之前创建的两个图像，并在这两个图像之间的Javascript切换中创建一个小脚本

第一个解决方案肯定是最好的，因为您只需要一个SVG文件，并且您可以使用简单的CSS命令来实现您想要的结果。但是，如果您熟悉Javascript，第二个选项也很简单。