opacityを適用したら背景色を透過したいのに文字も透過する...

opacityってちゃんと読んでいないとそのオブジェクトだけを透過すると思っちゃうんですけど、実際は子要素にも適用されちゃうんで他の透過方法を使うしかないです。それがrgbaってやつです。

rgbaとは

r(red), g(green), b(blue)これにa(alpha)というのをつけたものです。alphaは透明度を表します。まあ端的にいうと色の透明度を決めるプロパティですね。

sample.css

.sample {
  background-color: rgba(255,255,255,0,5);
}

これでrgbだけなら真っ黒になるんですがalphaが追加されたので半分透過した状態が確認できるはずです。
後ろに画像とかあれば分かりやすいです。
これで背景色だけを透過するので、子要素に文字があっても透過することなく表示させれます。
最後に参考サイトだけ貼って終わります。opacityとrgbaのリンク

ではでは