【CSS】背景画像に透過カラーを重ねる方法

まずは下のサンプルをご覧ください。

サイトの背景に画像を使用することは多々ありますが、「画像の上に文字を置いたら見づらかった…」なんてことありませんか？

文字を見やすくするためにbackgound-imageとbackground-colorで色を重ねようとしても画像が上に来てしまうし、結局画像を加工するしかないのか…？

今回は写真を加工せずにCSSのみで、背景画像の上に半透明カラーを重ねる方法をご紹介いたします。

擬似要素を使う方法

まずは::before擬似要素を使用して背景画像に透過カラーを追加する方法をご紹介します。

1.背景の用意

まず簡単なHTMLを用意しましょう。

背景を敷く部分に「bg」というクラス名をつけました。本来は中のコンテンツもdivで括った方がよいのですが、背景に色を置くという部分にフォーカスしたいので、今回は括らずに進めたいと思います。

<div class="bg">
    <p>背景に透過カラー</p>
</div>

cssで背景画像を敷きます。この時に「position:relative」を指定しましょう。

.bg {
    background: url(/* 画像URL */);
    background-size: cover;
    position: relative;
    height: 100%;
}

2.::beforeで透過カラーを重ねる

CSS上で「bg::before」を追記して透過カラーの設定を行います。

このときに色をどれぐらい透かせるのかというのも決めるため、色はrgbaで指定しましょう。

position: absolute;を設定しtop / right/ bottom / leftの数値を0にしてあげることで「.bg」と同じ大きさに広げることができます。※content:’ ‘;の指定をお忘れなく。

.bg::before {
    content: '';
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    background-color: rgba(0, 0, 0, 0.5);
}

ここまでで下のような状態になっていると思います。

背景を黒くすることができましたので、最後に中の要素を整えていきます。

3.中の要素を整える

中の「p」の位置を「.bg」の真ん中に持ってきます。同時に色やフォントサイズも変更。※下記CSSを参照

p {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    font-family: sans-serif;
    font-size: 30px;
    font-weight: bold;
    letter-spacing: 5px;
    color: #fff;
}

今回は「p」要素しかないので、そのまま位置を決めましたが、「h1やpがあって、それをdivで囲ってあって…」という場合でも囲っているdivで位置を調整すればいいだけです。

これにて完成！下のようになっているはずです。

linear-gradientを使う方法

次にlinear-gradientを使用する方法をご紹介します。

本来グラデーションをかけるものになりますが、今回は単色で利用します。CSSは下記のように書きます。

body {
    background: linear-gradient(rgba(0, 0, 0, 0.6), rgba(0, 0, 0, 0.6)),
        url(/* 画像のURL */);
    background-size: cover;
}

まずbackgroundプロパティにlinear-gradientを指定します。

この時に透過の設定も行うため、色の指定はrgbaで行いましょう。

グラデーションにもしないので、どちらも同じ色で記述しましょう。(例/ linear-gradient(rgba(0, 0, 0, 0.6), rgba(0, 0, 0, 0.6))

上記のコードを適用してあげると、画像の上に不透明度60%の黒い色を重ねることができます。（下記参照）

応用

linear-gradientで色を重ねているので、本来のグラデーションをかけるということもできます。

方法はlinear-gradientに色を指定してあげるだけです。もちろん角度もつけることもできますのでお好みに合わせて変更してみてください。

body {
    background: linear-gradient(130deg, rgba(250, 112, 154, 0.6), rgba(254, 225, 64, 0.6)),
        url(/* 画像のURL */);
    background-size: cover;
}

このように背景画像に色を重ねてあげることで文字の視認性もあがりますし、サイトの雰囲気も変更することができるようになります。

また、画像に１枚の透過カラーを重ねる時間も短縮できますので、ぜひ使ってみてください。最後までお付き合いいただきありがとうございました。