色付き画像に白色を上塗り

今日は filter: brightness() を使って色の付いてる画像を白色にしたりしてた。

.box__icon--invert {
  -webkit-filter: brightness(3);
  filter: brightness(3);
}

明るい色の背景を暗い色に反転させたとき、背景に載ってるアイコンの色を白に変えたい時がある。

普段は画像の置き換えで何とかしてるけど、これが CSS でできると便利。背景画像にも filter は有効なので、やっぱり便利。

• Demo: img タグで画像を指定
• Demo: background-image で画像を指定

IE でも早く filter 使いたい。