È possibile, usando solo CSS, rendere lo "sfondo" di un elemento semi-trasparente ma avere il contenuto (testo e immagini) dell'elemento opaco?
Mi piacerebbe realizzare questo senza avere il testo e lo sfondo come due elementi separati.
Quando provo:
<p>
<span>Hello world</span>
</p>
p {
position: absolute;
background-color: green;
filter: alpha(opacity=60);
opacity: 0.6;
}
span {
color: white;
filter: alpha(opacity=100);
opacity: 1;
}
Sembra che gli elementi figli siano soggetti all'opacità dei loro genitori, quindi opacity:1
è relativo all' opacity:0.6
del genitore.
Il metodo più semplice sarebbe quello di utilizzare un'immagine PNG a sfondo semitrasparente.
Puoi usare JavaScript per farlo funzionare in Internet Explorer 6 se ne hai bisogno.
Io uso il metodo descritto in PNG trasparenti in Internet Explorer 6.
A parte questo, si potrebbe fingere usando due elementi fratelli affiancati - rendere uno semi-trasparente, poi posizionare assolutamente l'altro sopra.
Il problema è che il testo in realtà ha piena opacità nel tuo esempio. Ha piena opacità all'interno del tag p
, ma il tag p
è solo semitrasparente.
Potresti aggiungere un'immagine di sfondo PNG semitrasparente invece di realizzarla nei CSS, o separare il testo e il div in due elementi e spostare il testo sopra il box (per esempio, margine negativo).
Altrimenti non sarà possibile.
Proprio come ha detto Chris: se usi un file PNG con trasparenza, devi usare un workaround JavaScript per farlo funzionare nel fastidioso Internet Explorer...
Opacità dello sfondo, ma non del testo ha alcune idee. O usi un'immagine semi-trasparente, o sovrapponi un elemento aggiuntivo.