CSSだけでpng画像を白黒反転する
CSSのfilterを使用して、CSSだけでpng画像を白黒反転させる。 hoverした時用に画像を作成する手間が少し省ける。
前提条件
png画像は背景透過させておく
背景付きだと背景も一緒に反転される
使用している色は白or黒一色
一部に別色が指定されていると、反転後の見た目がおかしくなる
やること
filter:invert(100%);で画像の色を反転させる。
ソースコード
code:css
filter:invert(100%);
transitionを利用したアニメーションにも対応する。