文字を透過させずに背景画像（background-image）を透過させる方法

個人的によく使うbackground-imageですが、先日background-imageのみを透過させたいことがあったのでCSSをメモしておきたいと思います。

文字を透過させないで背景画像のみを透過させる

どうしてもやってしまいがちなのがbackground-imageを指定したクラスにopacityを追加してしまう方法。

これでもbackground-imageは透過するのですが、上にテキストが入る場合はテキストまで透過してしまいます…。

ハナから透過したimageを用意すれば良いのですが、それでは芸がないのでCSSで記述出来るようにしたいと思います。

htmlに一手間加える

考え方としてはシンプルで【上に透過したレイヤー（白）を乗せる】という方法です。

<div class="background">
  <div class="mask">
    <p class="text">透過させたくないテキストやコンテンツが入ります</p>
  </div>
</div>

.background {
  background-image: url('background-image.jpg');
  width: 500px;
  height: 500px;
  background-size: cover;
  background-repeat: no-repeat;
}
.mask {
  height: 100%;
  background: rgba(255,255,255,0.3);
}

もちろん.maskのbackgroundのrgbaを白以外に指定することも可能です。

個人的によく使うのでメモしておきます。