文字を透過させず背景画像のみ透過する方法【CSS】

こんにちは、Naya☆LogのRiku Nayaです♪

今日は、CSSで文字を透過させず背景画像のみ透過する方法を説明します！

背景画像だけ透過したいのに文字まで透過されてしまう！汗
ってなったことがある人、ちょくちょくいると思うので、その違いをまず説明していこうと思います。

文字まで透過するコード

<div class="bg-image">
  <p class="text">テキストが入りますテキストが入りますテキストが入りますテキストが入ります</p>
</div>

.bg-image {
  background-image: url('ここに画像path');
  width: 220px;
  height: 220px;
  background-size: cover;
  opacity: 0.4;
}

背景画像のみを透過するコード

<div class="bg-image">
  <div class="bg-mask">
    <p class="bg-text">テキストが入りますテキストが入りますテキストが入りますテキストが入ります</p>
  </div>
</div>

.bg-image {
  background-image: url('ここに画像path');
  width: 220px;
  height: 220px;
  background-size: cover;
}
.bg-mask {
  height: 100%;
  background: rgba(255,255,255,0.5);
}

まとめ

bg-imageというクラスの下にbg-maskというクラスのdivタグを挟んみ、
bg-maskの”背景色”にrgbaで白の透過0.5を設定して高さを100%にします。

ただそれだけです^^ お試しあれ♪