css - 1 つの画像の色修飾子としての CSS フィルター

Question

HueRotate、Saturation、Brightness などの CSS Filter メソッドを使用して、完全に白く描画された PNG の色を変更することは可能ですか? Photoshop のカラー オーバーレイ効果に似ていますが、CSS です。

これは、色だけを変更する画像を大量に作成しないようにするための良い解決策です。たとえば、UI の暗いバージョンと明るいバージョンを持つアイコンのセット。

Answer 1

brightnessより大きくしてみてください100%。さらに上に移動すると、イメージが白にフェードアウトし始めることがわかります100%。画像の暗さによって、そこからどれだけ100%移動する必要があるかが決まります。

img {

      -webkit-filter: brightness(1000%);

}

CSS3 フィルターを表示できるのは Google Canary ユーザーのみであり、CSS3 フィルターは他のブラウザーの画像には影響しないことに注意してください。（少なくともこれまでのところ）。