è un comportamento dei browser

quando assegni un'opacità ad un elemento tutto ciò che vi si trova dentro non potrà assumere opacità maggiore rispetto al contenitore stesso.

quindi

<div class="contenitore">
<div>testo</div>
</div>

diventa

<div class="contenitore">
</div>
<div id="contenuto">testo</div>

e poi sposti il div "contenuto" in modo che sia visualmente posizionato "sopra" il div "contenitore" (setta i magini, tipo di posizionamento ecc..)

in questo modo l'opacità non ne risente