CSSで背景画像の上にグラデーションを重ねる2つの方法を解説

2024-01-20

今回は、CSSを使って画像の上に色のフィルター（グラデーション）を掛ける方法を解説します。

Webサイトのデザインやバナーでよく見かけるグラデーションのかかった画像。

あれ、デザインツールを使って画像として作ってもいいんですが、それよりもCSSで作った方が変更も複製も簡単にできるので、私はCSSをよく使います。

① backgroundと擬似要素で作る

グラデーションの色フィルターを重ねるには::beforeや::afterの擬似要素を利用します。

backgroundで背景画像を指定する
擬似要素で、覆いたいエリアを生成
擬似要素の中のbackgroundでグラデーションを指定する

グラデーションは（to~方向）で、〜に向かって前の色から後ろの色に変化するよ、という意味になります。

body {
  background: url('背景画像のURLを入れてください') top /cover no-repeat;

body::before {
  content: '';
  display: block;
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  background: linear-gradient(to bottom, 
　rgba(161,140,209,0.8),  rgba(194,206,251,0.5));
}

このコードでも問題はないのですが、次でご紹介する方法がより簡単です。

② background-imageを使って一括指定で作る

background-imageにグラデーションの設定と、背景画像をまとめて書く
区切るときはコンマで区切る

body {  
  background-image: linear-gradient(
　to bottom, 
　rgba(161,140,209,0.8),
  rgba(194,206,251,0.5)),
  url('背景画像のURLを入れてください');
  background-size: auto,cover;
  height:100vh;    
}

こちらの方法だと、より短いコードで作ることが可能です。

実際に、2つの方法で試した結果です（背景は富士山の画像を入れました）