【CSS】親要素は透明だが、その子要素は非透明にする

CSS

2024.08.12 2024.07.11

HTML、CSSを使っていて親要素を透明にし、子要素は非透明にしたいと思いopacityを使ったときに詰まったことのメモ

コード
1. 失敗だったパターン
2. 改善したコード
まとめ

コード

ここからはコードで紹介します

失敗だったパターン

<div class="parent">
  <div class="child">
    <p class="text">テキストテキスト</p>
  </div>
</div>

.parent {
  height: 150px;
  width: 150px; 
  background-color: blue;
  opacity: 0.5;
}

.child {
  background-color: red;
  opacity: 1;
}

.text {
  color: white;
}

親要素にopacity: 0.5、子要素にopacity: 1を指定してみたが結果は以下の画像の通り子要素も透明化されてしまいました

よくよく調べてみるとopacityは要素の全体に影響するそうで、今回の場合は親要素のopacity: 0.5の影響を受けてしまったいるそうです

改善したコード

改善策としてopacityではなくrgbaを使って透明度を変えるようにすると解決しました

HTMLは先ほどと同じでCSSのみの変更です

.parent {
  height: 150px;
  width: 150px; 
  /*  削除  */
  /*   background-color: blue; */ 
  /*   opacity: 0.5; */
  
  /*  追加  */
  background-color: rgba(0, 0, 255, 0.5);
}

.child {
  /*  削除  */
  /*   opacity: 1; */

  background-color: red;
  /*  rgbaで揃えたいなら下の書き方  */
  /*   background-color: rgba(255, 0, 0, 1);  */
}

.text {
  color: white;
}

修正後が以下の通り