【CSS】グラデーショに背景画像を重ねる方法

・cssでグラデーションに背景画像を重ねる方法を知りたい。
・グラデーションジェネレーターの記述が曖昧だから、記述方法の参考サイトをついでに知りたい。

こんな悩みを解決できる記事を書きました！

✓本記事の内容

・cssでグラデーションに背景画像を重ねる方法
・グラデーションの使い方をまとめた参考サイト

この記事を書いている僕は、WordPress制作を60サイトほど経験。
『slick 余白下』や『breadcrumb navxt アーカイブページ』のキーワードで、1位を獲得しております。

＜目次＞

cssでグラデーションに背景画像を重ねる方法

まずは、グラデーションに背景画像を重ねるたサンプルを見てみましょう。

<div class="sample"></div>

.sample {
  width: 800px;
  height: 300px;
  background: url(images/〇〇.png), linear-gradient(90deg, #70BBFA, #fff);
}

上記のコードを記述すると、先に紹介したサンプルのように実装することができます。

重要なポイントは2つ

1.グラデーションと背景画像は『,（カンマ）』で区切ります。
（『,（カンマ）』を記述しないとエラーになります。）

2.先に記述した方が前面になり、後に記述した方が背面になります。
（背景画像にグラデーションを重ねる場合は、『,（カンマ）』の前後を入れ替えることで実装することができます。）

CSSで、斜めや三色、円形にグラデーションをかけたりするときに、指定の方法を忘れるためグラデーションの使い方をまとめた参考サイトを1つのみご紹介します。