【CSS】opacityだと透明度を子クラスまで継承してしまう問題の解決法

何が起きたか

１.opacityで、背景画像を透過させようとした

.card {
  opacity: 0.8;
  border-radius: 1em;
  padding: 1.5rem;
  height: 100%;
  border: none;
}

2.ん？コンテンツの画像も透過してしまっている？

3.opacityを子クラスまで継承してしまっているから、imgだけopacity:1にしよう〜！

.card-img {
  opacity: 1.0;
}

4.ならない！！どうしましょ！

解決策

background-colorのrgbaのalpha値の透明度を変更！

.card {
  /* opacity: 0.8; */
  border-radius: 1em;
  padding: 1.5rem;
  height: 100%;
  border: none;
  background-color: rgba(255, 255, 255, 0.95); /* ←これを追加 */
}

見事！画像が透過されていない！！

RGBaとは

CSS3から、RGBa(Red,Green,Blue,Alpha)という色指定のプロパティを使うことにより、色の透明度（alpha値）の指定が可能になりました。これによって、今まではベタ塗りでも透過している背景色などは画像で指定する必要がありましたが、CSSで記述できるようになりました。
RGB各色には0～255までの色の濃さを示す数値を入力し、最後のアルファ値には0～1（小数点で0.8、0.55など）で指定します。
背景色（background-color）の他にも、
・文字（color）
・枠線（border-color）
なども透過可能です。

(参考)http://kawatama.net/web/1108

まとめ

透過方法には、

• rgbaのalpha値を使う
• opacityを使う

方法の2種類があるみたいです！
今回のように、画像などには透明度を適用させたくない場合は、rgbaのalpha値を使えば良いと思います！