opacity al div e non al testo

[Vicar]

Salve ragazzi,
vi faccio vedere il mio codice e poi vi spiego il problema:

<div id="content">ciao</div>

#content{
    background:#000000;
    opacity:0.6;
}

Questo è il mio problema semplificato, se faccio in questo modo lo sfondo è trasparente in modo corretto ma non solo, anche il contenuto al suo interno è trasparente, come evito questo problemino?

Grazie per le risposte!

[thecodingmonk]

<div id="content">
    <div id="testo">
    </div>
</div>


#content {
   ...
   opacity: 0.6;
}

#testo {
   background: transparent;
   opacity: 1;
}

Dovrebbe andare...

[Vicar]

No, non funziona, altre soluzioni?

Grazie per la risposta immediata

[maspar]

L'unica soluzione secondo me è quella di creare un background in png con la trasparenza desiderata ed applicarla al div, questa soluzione l'ho adottata diverse volte.

[Prill]

L'opacity viene ereditata, quindi se applicata a un contenitore si riflette su tutti i suoi contenuti. Puoi impostare lo sfondo con valori rgba (se ne èparlato tante volte nel forum, cerca rgba e trasparenza), oppure come ti è stato suggerito usare una png con trasparenza

[Vicar]

Eh, io ho cercato di eliminare le png così lo rendevo più veloce e non doveva caricare immagini.

Come faccio con l'opacity? Ora guardo la trasparenza con rgba..

[thecodingmonk]

Hai ragione, pensavo che anche se l'opacity viene ereditata poi settandolo esplicitamente avrebbe funzionato.

Comunque puoi anche fare una png 1x1 pixel e settere repeat con i CSS, in questo modo non credo che avrai problemi di velocità per caricare la PNG ed il problema è risolto (tranne che su IE6, ma vabbè)

[octod]

#o{
background:#000000;
opacity:0.6;
z-index : 0;
}

#content{
z-index : 1;
}

<div id="o"></div>

<div id="content">ciao</div>

dai le stesse coordinate e dimensioni di "content" a "o"

oppure usi l'escamotage dell'immagine di 1px*1px in png con la trasparenza (raccomandato).

[LuigiMem]

Originariamente inviato da Vicar
No, non funziona, altre soluzioni?

Grazie per la risposta immediata

Ciao Vicar la soluzione è semplice:

#content{
background: rgba(0, 0, 0, 0.6);
}

dove 0,0,0 è il nero e 0.6 l'opacità...

in questo modo è solo il fondo a prendere l'opacità
Ciao

[carlomarangoni]

Originariamente inviato da LuigiMem
Ciao Vicar la soluzione è semplice:

#content{
background: rgba(0, 0, 0, 0.6);
}

dove 0,0,0 è il nero e 0.6 l'opacità...

in questo modo è solo il fondo a prendere l'opacità
Ciao

Il codice così non è completo!

Il codice completo dovrebbe essere:

#content{
background: rgb(0, 0, 0);
background: rgba(0, 0, 0, 0.6);
}

Per essere compatibile con tutti e browser.

Devo dire però che anche così che con IE8 non funziona