画像のテキストを白文字に変える
用意されたテキストの画像をサイトに使用した際に背景色の都合によっては可視性が低くなります。
そんな時は fliter: invert(1); で白文字にさせてしまうのも良い手だと思います。
下のフレームに表示されているロゴは「どちらも同じ黒色のロゴ」です。
CSS filter: invert(1)を掛けて白くしています。
See the Pen Untitled by ぼぶ@朝活input中 (@bobu_6326) on CodePen.
このCSSの filter かなり使い勝手がよく色々なことが出来ます。
例えば下のフレーム内に3枚の画像があります。
左から「フィルターなし・ぼやかし・光度を落とす」フィルターをかけています。
光度を落とす filter: brightness(0.5) は画像の上にテキストを乗せる時によく使います。
See the Pen Untitled by ぼぶ@朝活input中 (@bobu_6326) on CodePen.
