cssの擬似要素を使って背景画像にフィルターをかける

HTML/CSS

cssの擬似要素を使って背景画像にフィルターをかける方法

背景画像としてオリジナルのものとカラーフィルターをかけたものの2種類を使いたいときに、背景画像の素材にあらかじめ加工をしておいてオリジナルと2枚の画像を用意する方法もありますが、”::after”や”::before”といったCSSの擬似要素を使う方法もあります。
この方法を使うことで用意する画像がオリジナルの1枚だけで済むようになります。

オリジナルの画像を背景画像に指定した状態

See the Pen
BayEzqB
by saku (@web-saku)
on CodePen.

オリジナルの画像を背景画像に指定し、擬似要素でカラーフィルターをかけた状態

擬似要素を使ってフィルターをかける場合には、擬似要素に背景色の指定と位置の指定をする必要があります。
なお、この記述例では擬似要素として”::after”を使用していますので、オリジナルの背景画像の上にフィルターがかかっていますが、”::before”を使用するときにはz-indexの指定がないとフィルターがオリジナルの背景画像の下になってしまうので注意が必要です。

See the Pen
BaNzbzY
by saku (@web-saku)
on CodePen.

コメントを残す





このサイトはスパムを低減するために Akismet を使っています。コメントデータの処理方法の詳細はこちらをご覧ください