こんにちは、Ryohei（@ityryohei）です！

本記事では、背景画像にグラデーションを重ねる方法を2パターンご紹介しています。

デザインカンプで画像の上にグラデーションが重ねられていることがあります。流行しているということもあり、割と見かけることが多いですね。

コーディングするときにグラデーションと一緒に画像をスライスして使用する方もいますが、背景画像だけをスライスして画像の上にグラデーションを重ねて指定する方法もあります。

グラデーションが一ヵ所だけの場合は画像と一緒にスライスして使用しても良いですが、複数ある場合はスタイルを作成しておくと使い回せますのでおすすめです。

では、解説していきます。

背景に画像とグラデーションを指定して重ねる方法

背景のbackground-imageに画像をグラデーションを一括で指定して重ねる方法です。

下記は完成時のデモになります。画像の上にグラデーションが表示されていますね。

DEMO

See the Pen
Overlay Gradient Background Image1 | CSS by ryohei (@intotheprogram)
on CodePen.

実装方法はとても簡単です。まずは背景画像を表示する要素を作成します。

HTML

    
Lorem ipsum

上記で作成した要素にCSSのbackground-imageで画像とグラデーションを指定します。

CSS

#app {
    position: relative;
    width: 100%;
    height: 300px;
    background-image:
        linear-gradient(109.6deg, rgba(152,126,179,.7) 50%, rgba(236,119,36,.7) 100%),
        url(https://i.picsum.photos/id/1029/1280/300.jpg);
    background-size: cover;
}

以上で画像にグラデーションを重ねることができます。

背景に画像を指定してグラデーションは別要素で重ねる方法

もう一つの方法は背景画像を指定したの上に、グラデーションを指定した要素を重ねる方法です。基本的には前項で紹介した方法で問題ないかと思いますが、グラデーションの要素の数が多い場合はこちらの方法が使いまわしやすいので良いかもしれません。

下記は完成時のデモになります。表示自体に変化はありませんが、実装方法が少し異なります。

DEMO

See the Pen
Overlay Gradient Background Image2 | CSS by ryohei (@intotheprogram)
on CodePen.

まずは前項と同様に背景画像を表示する要素を、それにプラスしてグラデーションを表示する要素を作成します。

HTML

    
Lorem ipsum
    

続いてCSSで背景画像とグラデーションをそれぞれ指定し、positionで重ねます。

CSS

#app {
    width: 100%;
    height: 300px;
    background-image: url(https://i.picsum.photos/id/1029/1280/300.jpg);
    background-size: cover;
}

#app .grad {
    position: absolute;
    top: 0;
    left: 0;
    z-index: 1;
    width: 100%;
    height: 100%;
    background-image: linear-gradient(109.6deg, rgba(152,126,179,.7) 50%, rgba(236,119,36,.7) 100%);
}

グラデーションを別要素に分けたことで使い回しやすくなりましたね。グラデーションを指定する要素が多い場合は別要素にわけておくと実装が楽になるかと思います。

最後に

画像の上にグラデーションを重ねる手法は流行ということもありしばらく続きそうです。デザインカンプから画像をグラデーションごとスライスするだけでなく、CSSだけで画像の上にグラデーションを重ねる方法を知っておくと色々なデザインに対応できるのでぜひ覚えていってくださいね！

以上、背景画像にグラデーションを重ねる方法のご紹介でした！