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

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

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

<div class="container">
  <div class="text">
    <p>いろんな背景画像</p>
  </div>
</div>
.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;
}

image2

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

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

.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;
}

ブラウザで確認すると、

image3

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

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

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

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

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

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

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

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

.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;
}

ブラウザで確認すると、

image4

画像のした部分が明るくなりました。

rgba(0, 0, 0, 0)は、transparentでも問題ありません。

画像が見づらくなった場合は、ぜひこちらを試してみてください。

ブログ一覧