【HTML+CSS】簡単に背景画像に半透明レイヤーを重ねたり複数の画像を重ねる方法

背景画像に半透明レイヤーを重ねる方法

使用する画像に直接半透明レイヤーを重ねて加工してあればその画像を使用すればいい話ですが、画像の書き出しがうまくいかなかったり、画像の加工が苦手な人にはこちらの方法が有効になると思います。

私は今までpositionを使ってレイヤーを重ねる方法で実装していましたが、今回backgroundプロパティは複数の背景画像を指定できることを知って、とても簡単に実装できたのでその方法を忘備録として書き残しておきます。

positionを使ってレイヤーを重ねる方法はこちらの記事を参考にしてみてください。

【HTML+CSS】画像にlinear-gradientで透過グラデーションをかける方法

使用する画像

今回はグラデーションで作成する白いレイヤーを重ねます。

HTML

<section class="bg_img">
</section>

CSS

.bg_img {
  width: 100%;
  height: 100vh;
  background: radial-gradient(rgba(#fff, .4) 0%, rgba(#fff, .4) 100%),
    url(../img/cat3.jpg) no-repeat center/cover;
}

画像は先に記述したものが上に重なります。

radial-gradientの値を変更すれば、レイヤーにグラデーションをかけることができます。

2つの画像を重ねる方法(background)

次にレイヤーを重ねるのではなく、2つの画像を重ねてみます。

使用する画像

こちらの半透明の画像を猫の画像(cat3.jpg)に重ねてみます。

CSS

.bg_img {
  width: 100%;
  height: 100vh;
  background: url(../img/pt_bg.png),
    url(../img/cat3.jpg) no-repeat center/cover;
}

こちらも先に記述した画像が上に重なります。

3つの画像を重ねる方法(background-image)

最後はbackground-imageで3つの画像を重ねてそれぞれにプロパティを設定してみます。

使用する画像

CSS

.bg_img {
  width: 100%;
  height: 100vh;
  background-image: url(../img/pt_bg.png), url(../img/cat7.jpg),
    url(../img/cat3.jpg);
  background-repeat: no-repeat, no-repeat, no-repeat;
  background-position: center, right, center;
  background-size: contain, contain, cover;
}

3枚の画像にそれぞれbackgroundプロパティを記述しました。

background-positionとbackgroun-sizeを変更してみたので、上記の画像を見れば3つの画像が重なっていることは一目瞭然でわかります。

このように背景画像にレイヤーを重ねたり、複数の背景画像を重ねたりすることは簡単にできます。