Profile

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

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

黒背景を透過させても中の文字は透過させたくない場合。実はopacityを使った時点でどうにもできなくなるので、それを使わずrgbaを使うことで解決できます。

目次

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

黒いフィルタをかける前

宝塚歌劇 2022年秋 雪組公演
グランド・ミュージカル
『蒼穹の昴』
～浅田次郎作「蒼穹の昴」より～

×…黒いフィルタをかけて子要素まで透過してしまった

宝塚歌劇 2022年秋 雪組公演
グランド・ミュージカル
『蒼穹の昴』
～浅田次郎作「蒼穹の昴」より～

○…黒いフィルタはかけるが子要素は透過させない

宝塚歌劇 2022年秋 雪組公演
グランド・ミュージカル
『蒼穹の昴』
～浅田次郎作「蒼穹の昴」より～

コピペはこちらから

<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を使ってしまうとどうにもできなくなってしまうので、そこだけ覚えておけば大丈夫です。

関連記事