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のを使用して背景を削除し、新しい透明なイメージを返します。 Iconが小さければ、イメージをencode base64としてAPIに埋め込むことさえできます。 Base65のエンコーディングおよびデコードには、ブラウザがサポートされています（full）。

Answer 2

ブレンドモード

ですから、これは問題ないはずIE /エッジ/モバイルブラウザを心配する必要がない場合は、これらのためのブラウザのサポートは、かなり低いながら。

、何をやりたいと思いますが適用されますあなたの背景画像と何も与えないだろうけれども、あなたの指定背景ブレンドモード

続い背景色で使用する非常にシンプルあなたは画像編集ソフトウエアのような完全な背景の変更をすると、と掛け合わせると、と近づくでしょう。

例：

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