Opacità immagine background ereditata

[Mikele2016]

Buon Giorno,
ho un problema che non riesco a risolvere e che pur essendo "semplice" non trova la soluzione:

Stò sviluppando un rito e ho inserito alcune immagini come "Background" a "pieno schermo" che ruotano ogni tot. secondi dando tramite CSS opacità a 0.8 % e fino a qui nessun problema...
Il problema subbentra nei div del "Conatainer"! non c'è modo di eliminare l'opacità!
Ci sono alcuni "Box" che vorrei non ereditassero l'opacità perche contengono immagini molto belle e descrizioni importanti che non vanno (opacizzate) ...
Le ho provate tutte ...
Ho provato con z-index cercando di dare un 1livello al div che non deve essere opaco ma: nulla ...

Qualcuno sa aiutarmi?

Grazie a tutti comunque vada
MiKele 2016

[KillerWorm]

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

Note: When using the opacity property to add transparency to the background of an element, all of its child elements become transparent as well.

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:

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.