如何用css绘制png图像的轮廓？

我有以下图像。我已经在我的html中添加了它，并给它一个类名。现在我想将黑色轮廓上色为白色。我怎样才能做到这一点使用CSS？如何用css绘制png图像的轮廓？

2017-08-08 Salman

你能告诉我们您所遇到的问题的更多细节？你有什么特别的尝试？ –

你不能：PNG是一个位图图像，它的像素内容不能被CSS修改（除非你正在谈论应用CSS过滤器）。从技术上讲，你可以简单地使用'invert'过滤器，但是假设PNG是一个带有黑色轮廓和透明填充的图像。相反，您想要将图像作为具有路径的SVG导出。您始终可以使用CSS更改路径笔触颜色。 – Terry

如果您将黑色轮廓上色为白色，图像是否消失？ – chiliNUT

它实际上是不可能的纯CSS。

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

使用SVGs改变颜色的CSS（见this link更多信息）之前创建
使用两个图像，并创建一个小脚本在这两个图像之间进行切换

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

来源

2017-08-08 14:10:02

您可以使用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>

来源

2017-08-08 14:13:56

为什么downvote？ –

@ spencer.sm upvoted，其实不错） – godblessstrawberry

如何用css绘制png图像的轮廓？

回答

相关问题