2020/03/01 (更新日: 2025/06/25)

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.

・CSSの記述例

CSS
.sample {
  background: url(https://web-saku.net/wp-content/uploads/2020/02/dolphin-san.jpg);
  background-size: cover;
  width: 100vw;
  height: 100vh;
  position: relative;
}

.sample::after {
  content: "";
  background: rgba(255,255,255,.5);
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
}

以上、CSSの擬似要素を使って背景画像にフィルターをかける方法と記述例について紹介してきました。
参考になりましたら幸いです。