CSSを使用して、白く透けて見える画像を任意の色に色づけする方法は？

Question

白と透明のピクセル（example）でイメージを撮影し、CSSのみを使用して赤やオレンジに色を変えるにはどうすればよいですか？以下

質問が以前に頼まれた -

Change color of PNG image via CSS?

を答えは、フィルタを使用すると言うが、それが仕事になるだろう、フィルタのどの組み合わせを示すものではありません。透過する白い画像を赤色に変えるフィルタの組み合わせはありますか？明確にするため

---

：私は背景色ではない、画像の白い部分の色を変更したいと思います。たとえば、私はそれを赤色で透明にしたいと思います。

img { 
 
    -webkit-filter: brightness(50%) saturate(200%) hue-rotate(90deg); 
 
    }

<img src="https://upload.wikimedia.org/wikipedia/commons/thumb/f/f4/White_Globe_Icon.png/600px-White_Globe_Icon.png"></img>

Answer 1

私は少し周りを演奏し、唯一の白い部分塗装に対する可能な解決策が見つかりました：それはの仕組み

img { 
 
    display: block; 
 
    background: black; 
 
    -webkit-filter: brightness(.5); 
 
} 
 
.recolor { 
 
    position: relative; 
 
    display: inline-block; 
 
    -webkit-filter: brightness(1) contrast(300%) invert(1); 
 
} 
 
.recolor:after { 
 
    content: ""; 
 
    display: block; 
 
    position: absolute; 
 
    top: 0; 
 
    bottom: 0; 
 
    left: 0; 
 
    right: 0; 
 
    background: rgba(0, 255, 255, 0.3); 
 
}

<figure class="recolor"> 
 
    <img src="https://upload.wikimedia.org/wikipedia/commons/thumb/f/f4/White_Globe_Icon.png/200px-White_Globe_Icon.png"> 
 
</figure>

：

を

1. は、画像の背景が黒作り、半分にその明るさを設定し、
2. フォアグラウンドグレーがラッパー要素（<figure>）を作成し、比較的低い不透明度を望む反転色のオーバーレイ（:after）を作成するために
3. ラッパー要素をフィルタリングします。そのような高いコントラストで明るくして、背景が黒くなり、前景色が残るようにします。
4. が今だけ白

制限であなたの前景色を取得するためにラッパーを反転：透明性が原因の色は多分あなたが望んでいない、正確な色ですフィルタリングに、失われ、browser supportは最適ではない

Answer 2

画像に背景色を付けるだけです。以下の例をご覧ください。

使用この画像

注：イメージが透明である

CSS

img{ 
    background-color: red; 
} 

HTML

<img src="test.png"> 

Answer 3

フィルタを使用して白い画像を「カラー化」することはできますが、結果は不完全です。

最初のステップはsepiaフィルタであり、次にhue-rotateです。

真の "赤"は達成するのが難しいかもしれませんが、これ以上プレイすることはできます。

img { 
 
    max-height: 100vh; 
 
    width: auto; 
 
    -webkit-filter: 
 
    sepia(100%) 
 
    saturate(2000%) 
 
    hue-rotate(222deg); 
 
} 
 
body { 
 
    background: green; 
 
}

<img src="https://upload.wikimedia.org/wikipedia/commons/thumb/f/f4/White_Globe_Icon.png/600px-White_Globe_Icon.png"></img>