刪除CSS中PNG文件的背景顏色

Question

如何使用CSS刪除png的背景顏色？

我正在一個網站上工作，我需要在背景圖像上堆疊PNG圖標。由於該圖像來自外部API，因此我無法事先對其進行編輯。

Answer 1

選項1：純CSS [有限支持]

做到這一點的唯一方法是使用mix-blend-mode或background-blend-mode可惜它不支持IE和邊緣（檢查支撐位here）如果您需要IE支持請參閱選項2.

您可以閱讀更多關於此CSS屬性here。通過將混合模式設置爲screen，您可以刪除png圖像的白色背景。

background-image: url(face.jpg); 
    background-color: red; 
    background-blend-mode: multiply; 

選項2：ImageMagick的[需要後端]

您可以創建一個從API獲取圖像自己的後端終點，使用ImageMagick去除背景，並返回新的透明圖像。如果圖標很小，您甚至可以將圖像嵌入API中作爲base64編碼。 Base65編碼和解碼有full瀏覽器支持。

Answer 2

混合模式

因此，雖然這些瀏覽器的支持是相當低的，如果您不需要擔心IE/EDGE /移動瀏覽器，這應該是罰款。

非常簡單易用，你會想要做的就是運用你的背景圖片和後跟您指定背景混合模式

雖然沒有人會給出一個背景色你在圖像編輯軟件中完美的背景變化，你會變得非常接近乘以。

如：

background-image: url('yourimage.png'); 
background-color: blue; 
background-blend-mode: multiply;