HTML&CSS

【CSS】背景画像上に表示しているテキストを見やすくする方法

作成日：2021年06月22日

更新日：2021年06月22日

背景画像の上にテキストを表示してみたけれど、背景が明るすぎてテキストが見づらいこと、ありませんか？

今回は、背景画像上に表示しているテキストを見やすくする方法を紹介します。

基本のコードは、以下になります。

html
<div class="container">
  <div class="text">
    <p>いろんな背景画像</p>
  </div>
</div>

css
.container {
  height: 450px;
  border: 1px solid #000;
  display: flex;
  justify-content: center;
  align-items: flex-start;
  background-image: url("/images/lake.jpg");
  background-size: cover;
  background-position: center;
}

.text {
  font-size: 24px;
  color: #fff;
}

今のままでは、雲とテキストが重なっていて、テキストが見づらくなっています。

テキストを見やすくするために、linear-gradientを使って、画像の上に少し透明な黒の背景色を設定します。

css
.container {
  height: 450px;
  border: 1px solid #000;
  display: flex;
  justify-content: center;
  align-items: flex-start;
  background-image: linear-gradient(rgba(0, 0, 0, 0.3), rgba(0, 0, 0, 0.3)),
    url("/images/lake.jpg");
  background-size: cover;
  background-position: center;
}

ブラウザで確認すると、

画像が少し暗くなって、テキストが見やすくなりました。

background-imageに、背景画像を指定した前にlinear-gradientを指定します。

linear-gradientは、rgba()で RGBA カラーモデルを指定します。

RGBA カラーモデルは、rgba(赤, 緑, 青, 透明度)で成り立っています。

今回は、黒を半透明にしたかったので、rgba(0, 0, 0, 0.3)としました。

4 番目の 0.3 を『0』に近づけるほど透明になり、『1』に近づけるほど不透明になります。

linear-gradientのrgba()を同じ値にすることにより、グラデーションにならないようにしました。

テキストの場所辺りを暗くして、それ以外を明るくするには、linear-gradientでグラデーションすると自然に見えます。

css
.container {
  height: 450px;
  border: 1px solid #000;
  display: flex;
  justify-content: center;
  align-items: flex-start;
  background-image: linear-gradient(rgba(0, 0, 0, 0.3), rgba(0, 0, 0, 0)),
    url("/images/lake.jpg");
  background-size: cover;
  background-position: center;
}