cssの擬似要素を使って背景画像にフィルターをかける
cssの擬似要素を使って背景画像にフィルターをかける方法
背景画像としてオリジナルのものとカラーフィルターをかけたものの２種類を使いたいときに、背景画像の素材にあらかじめ加工をしておいてオリジナルと２枚の画像を用意する方法もありますが、”::after”や”::before”といったCSSの擬似要素を使う方法もあります。
この方法を使うことで用意する画像がオリジナルの１枚だけで済むようになります。
オリジナルの画像を背景画像に指定した状態
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 を使っています。コメントデータの処理方法の詳細はこちらをご覧ください。
コメントを残す