testo e opacity

[Filippo87]

ciao, ho creato questo box, però quando do gli attributi a h3 e p attraverso i css, al momento della visualizzazione anche questo mi risulta opacizzato.. come posso fare?



<div class="boxnews">
[img]img.jpg[/img]
<div class="contenutonews">
<h3>Titolo della news</h3>


Descrizione news</p> Leggi
</div>
</div>


.boxnews {
position:absolute;
top: 0;
left:2px;
width: 680px;
height: 360px;
}

.contenutonews {
position: absolute;
bottom: 0;
width: 604px;
left: 0;
background-color:#000;
opacity: .6;
/* For IE 5-7 */
filter: progid: DXImageTransform.Microsoft.Alpha(Opacity=60);
/* For IE 8 */
-MS-filter: progid: DXImageTransform.Microsoft.Alpha(Opacity=60);
padding: 16px 38px 20px 38px;
text-transform:none;
overflow:auto;
}

[codencode]

Opacity ha il difetto di trasferire l'opacità anche al contenuto dell'elemento a cui è applicata. Con i CSS 3 il problema si risolve con l'uso della proprietà rgba. Se si vuole utilizzare opacity, si deve separare il contenitore dal contenuto; ad esempio si può applicare la proprietà al div contenitore e porre il suo contenuto fuori dal div stesso, ma posizionato sopra di esso con i CSS.

[Filippo87]

quindi o uso la proprietà rgba, oppure se non ho capito male vado a creare un altro div all'interno di contenutonews?

[codencode]

Con rgba risolvi di sicuro, però non è supportata da IE. Con opacity puoi procedere in diversi modi, ma non come hai proposto. Un modo può essere togliere il contenuto da dentro contenutonews e metterlo in un altro div all'esterno di contenutonews. A contenutonews applichi opacity e posizioni l'altro div su contenutonews tramite i posizionamenti in CSS.

[Mich_]

Se quello che deve essere semitrasparente e` solo lo sfondo, la cosa piu` semplice e` usare una immagine semitrasparente (gif o png): il codice si semplifica enormemente e funziona senza problemi in tutti i browser, anche i piu` vecchi (con la png occorre pero` applicare i filtri per IE).

Nota: ci sono varie discussioni a tal proposito: con una ricerca nel forum (bottone in alto) e` possibile trovarli e copiare le buone soluzioni.