Ciao e benvenuto. L'argomento è ampiamente discusso sia su questo forum sia sul web.
http://forum.html.it/forum/search.ph...und%20immagine
https://www.google.it/search?q=css+b...child+elements
In sostanza la proprietà opacity influisce sull'intero elemento e quindi sugli stessi figli in esso contenuti.
http://www.w3schools.com/cssref/css3_pr_opacity.asp
Attualmente non c'è modo di annullare l'effetto dell'opacity che influisce sui contenuti, ma esistono diverse soluzioni per fare ciò che chiedi. Ad esempio:Note: When using the opacity property to add transparency to the background of an element, all of its child elements become transparent as well.
1 - usare un'immagine png con la trasparenza applicata preventivamente;
2 - usare un elemento <img> con posizionamento assoluto ed opportuno z-index, che fungerà da sfondo, ed applicare a questo l'opacity desiderata;
3 - usare un ulteriore <div> con posizionamento assoluto, opportuno z-index, ed applicare a questo il background-image e l'opacity desiderata;
4 - usare uno dei pseudo-elemento CSS (::after o ::before) sul div contenitore, quindi applicare a questo il background-image e l'opacity desiderata.
Quest'ultima soluzione mi pare la più pulita e versatile.