コンパイラかく語りき

import { Fun } from 'programming'

CSSだけで画像を完全に黒(白)色にする

小ネタ。 pngのアイコンを、白と黒の2通りで出したかったので調べました。

黒くするには↓

.make-this-black {
 filter: brightness(0) invert(1);
}

白くするには↓

.make-this-white {
 filter: brightness(1) invert(0);
}

を指定すればOK。

filterプロパティのbrightness値とinvert値を利用しています。 brightnessは明るさ指定、invertは階調反転を指定できます。

ベンプレはIEのために必要かもしれません。

参考: filter - MDN Filter Effects Module Level 1 - W3C