背景色の指定を子要素が引き継いでしまう。

実現したいこと

親要素の背景色を子要素に引き継がないように設定したい。

発生している問題・分からないこと

要素①（親要素）にz-index指定1を指定していて、cssでopacity0.8を設定しています。

その上に要素②を配置し
さらにその上に要素③（文字）を置いて文字をくっきり表示させたいですが
親要素の背景のopacity: 0.8;　が要素③にも適用されてしまい、文字が透けてしまいます。

背景のbackground: #000000;　opacity: 0.8;の記載は変えずに要素③の文字を透けないようにする設定方法が知りたいです。

該当のソースコード

特になし

試したこと・調べたこと

上記の詳細・結果

要素③のCSSの記述を下記に変更

要素3 {
position: relative;
z-index: 999;
background-color: rgb(0,0,0,0) !important ;
opacity: 1 !important ;
}

補足

特になし