【CSS】背景画像を暗くしたり別の画像を重ねたりぼかしたり

WEB 2018.08.23

背景画像の上にテキストを配置すると、画像によっては文字が見えにくい場合があります。そんな場合はPhotoshop等で画像を暗くしてみたりとか、色々と加工をするのですが、それをCSSのみでおこなう方法をご紹介します。

デモを作ってみました。

See the Pen 【CSS】背景画像を暗くしたり別の画像を重ねたりぼかしたり by miso (@misodtm) on CodePen.

それでは、それぞれのスタイルについて書いていきます。

1 共通部分のスタイル
2 背景画像に暗い色を重ねる
3 背景画像に別の画像を重ねる
4 背景画像をぼかす

共通部分のスタイル

画像にテキストを重ねただけの状態です。
HTMLは親要素の「.box」に別のClassを追加するだけです。class="box overlay1"みたいに。


<div class="box">
  <p>何もしてない状態</p>
</div>


.box {
  display: flex;
  justify-content: center;
  align-items: center;
  position: relative;
  height: 300px;
  width: 300px;
  margin: 20px auto;
  background: url("背景画像のパス") no-repeat 0 0/cover;
}

p {
  z-index: 1;
  font-size: 18px;
  font-weight: bold;
  color: #FFF;
}

背景画像に暗い色を重ねる

背景画像を暗くして、テキストを読みやすくします。
CSSだけで出来るのでとても楽ですね。


.overlay1::after {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  width: 100%;
  background: rgba(0, 0, 0, 0.6);
}

背景画像に別の画像を重ねる

ちょっと分かりにくいかもですが、透明に黒の斜線を引いている画像をリピートして重ねてます。


.overlay2::after {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  width: 100%;
  background: url("別の画像のパス") repeat;
}

背景画像をぼかす

ぼかした写真の上にテキストを配置するのも良いですねぇ。


.blur {
  overflow: hidden;
}
.blur::after {
  content: "";
  position: absolute;
  top: -7px;
  right: -7px;
  bottom: -7px;
  left: -7px;
  background: inherit;
  filter: blur(7px);
}

background: inherit; で親要素（.box）の値を継承。

filter: blur(●px);でぼかす。そしてポジションの値をblurと同じ数値にマイナス。
ぼかしがはみ出すので、親要素（.blur）にoverflow: hidden;。

画像を別のソフトで加工しなくてよいのでとても楽ですよ。
すごく簡単にできるのでよく使用するテクニックです。
ぜひ。

CSS