opacityが子要素まで継承しちゃう場合の対応

概要

背景色を半透明にするためにCSSでopacityを設定した時に子要素の文字まで適用されてしまうのを修正したい場合はbackground: rgbaを指定すればよかった。

やったこと

修正前のコード

div.content {
opacity: 0.5; <= ここ
background-color: #fff; <= ここ
width: 800px;
margin: 0px auto;
padding: 0px 20px 40px;
font-family: 'Quicksand', 'Noto Sans Japanese';
position: relative;
top: 20px;
}

こんな感じで透け感でちゃう。
そして、修正後のコード

div.content {
  background-color: rgba(255, 255, 255, 0.5); <= ここ
  width: 800px;
  margin: 0px auto;
  padding: 0px 20px 40px;
  font-family: 'Quicksand', 'Noto Sans Japanese';
  position: relative;
  top: 20px;
}

ちょっと文字色などはそれぞれの要素で修正してますが、こんな感じではっきり読めるようになりました。