Sto usando qualcosa di simile al seguente codice:
<div style="opacity:0.4; background-image:url(...);">
<div style="opacity:1.0;">
Text
</div>
</div>
Mi aspettavo che questo facesse sì che lo sfondo avesse un'opacità di 0.4 e che il testo avesse un'opacità del 100%. Invece entrambi hanno un'opacità di 0.4.
I bambini ereditano l'opacità. Sarebbe strano e scomodo se non lo facessero.
Puoi usare un file PNG traslucido per la tua immagine di sfondo, o usare un colore RGBa (a per alfa) per il tuo colore di sfondo.
Esempio, sfondo nero sbiadito al 50%:
<div style="background-color:rgba(0, 0, 0, 0.5);">
<div>
Text added.
</div>
</div>
Io farei qualcosa del genere
<div class="container">
<div class="text">
<p>text yay!</p>
</div>
</div>
CSS:
.container {
position: relative;
}
.container::before {
position: absolute;
top: 0;
left: 0;
bottom: 0;
right: 0;
background: url('/path/to/image.png');
opacity: .4;
content: "";
z-index: -1;
}
Dovrebbe funzionare. Questo presuppone che tu debba avere un'immagine semi-trasparente BTW, e non un colore (per il quale dovresti semplicemente usare rgba). Si presume anche che non si possa semplicemente alterare l'opacità dell'immagine in anticipo in Photoshop.
Questo perché il div interno ha il 100% dell'opacità del div in cui è annidato (che ha il 40% di opacità).
Per aggirarlo, ci sono alcune cose che potreste fare.
Potreste creare due div separati come questo:
<div id="background"></div>
<div id="bContent"></div>
Impostate l'opacità CSS desiderata e altre proprietà per lo sfondo e usate la proprietà z-index (z-index) per stilizzare e posizionare il div bContent. Con questo puoi posizionare il div overtope del div di sfondo senza avere la sua opacità.
Un'altra opzione è RGBa. Questo vi permetterà di annidare i vostri div e di ottenere comunque un'opacità specifica del div.
L'ultima opzione è di fare semplicemente un'immagine semi-trasparente .png del colore che volete nel vostro editor di immagini desiderato, impostare la proprietà background-image all'URL dell'immagine e poi non dovrete preoccuparvi di pasticciare con il CSS e perdere la capacità e l'organizzazione di una struttura div annidata.