如何用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圖像的輪廓？

回答

相關問題