【CSS】黒背景を透過させても中の文字は透過させない方法

背景画像のトーンを暗くするために透過した黒を重ねても、その中の子要素（テキストなど）は黒くなって欲しくない場合。実はopacityを使った時点でどうにもできなくなるので、それを使わずrgbaを使うことで解決できます。

文字を透過させないサンプル

コードはこちら

<div class="box">
  <div class="box-black">
    <p class="box-text">透過させたくないテキスト</p>
  </div>
</div>

.box {
  background: url('背景画像のurl') no-repeat center;
  text-align: center;
}
.box-black {
  padding: 70px 0;
  background-color: rgba(0, 0, 0, 0.5);
}
.box-text {
  color: #fff;
}

文字を透過させない仕組み

opacityを使った時点で解決できなくなる

opacityの効果はその要素だけでなく、その中にある子要素すべてに影響します。つまり黒背景にopacity: 0.5とした時点で、その子要素であるテキストも強制的にopacity: 0.5に。ここからなんとか挽回しよう、と子要素にopacity: 1などと記述してもまったく効いてくれません。

background-colorのrgbaを使うことで解決

なので解決方法は「opacityを使わず、background-colorのrgba（透明度）を指定する」です。background-colorで透明度を指定した場合は子要素は影響を受けません。

まとめ

黒い背景色を透過しても中の文字は透過させたくない場合のやり方でした。opacityを使ってしまうとどうにもできなくなってしまうので、そこだけ覚えておけば大丈夫です。