Sostituisci il testo opaco in un div trasparente con i CSS

Question

Sto cercando di rendere il testo all'interno di un div trasparente non hanno l'opacità, alias essere completamente nero:

<div style="opacity:0.6;background:#3cc;"> 
    <p style="background:#000;opacity:1">This text should be all black</p> 
</div> 

Questo è possibile solo a che fare con i CSS?

Grazie in anticipo

Answer 1

Gli elementi figlio ereditano l'opacità. Quello che potresti fare è posizionare il <p> al di fuori del div opaco e impostare un margine negativo per spostarlo su di esso.

Mi sono imbattuto spesso in questo problema e in genere l'ho risolto in questo modo. Il problema è solo quando hai un contenuto dinamico e il div deve espandersi.

Answer 2

Il modo più semplice è per lo stile lo sfondo del div genitore con opacità/alpha:

div { 
    background: #fff; /* for browsers that don't understand the following rgba rule */ 
    background-color: rgba(255,255,255,0.5); /* rgb, white, with alpha at 0.5 */ 
} 

Questo non è tuttavia compatibile con IE.

Per IE> = 7 compatibilità, è possibile utilizzare:

div { 
    background-image: url('path/to/partially_transparent.png'); 
    background-position: 0 0; 
    background-repeat: repeat; 
} 

Ricordo che IE < 7 ha un'opzione di filtro proprietaria, ma ho paura non riesco a ricordare come funziona. Quindi ho omesso qualsiasi tentativo di descriverlo/mostrarlo. Se riesco a trovare un riferimento utile, lo aggiungerò in seguito.

Come notato da easwee, l'opacità è ereditata da elementi contenuti, motivo per cui non è possibile sovrascriverlo, ed è il motivo per cui preferisco utilizzare l'approccio background-color/background-image.

Answer 3

Lo sfondo è costituito da un colore solido? In tal caso, puoi anche utilizzare RGBa per selezionare un colore di sfondo trasparente per lo div che non è ereditato dai suoi figli. Leggi RGBa Browser Support per ulteriori informazioni, una soluzione alternativa per IE e another solution.

Se lo sfondo di div non è pieno, è possibile utilizzare un PNG trasparente come sfondo. Ricordarsi di usare AlphaImageLoader in IE6 (e 5.5).