Modificare il font del mio testo

[Gotchabest]

Ho questo pezzo di codice:

<span style='opacity:0.3;text-align:center;font-size:150%;font-family:"Times New Roman", Times, serif;'>
Tu non sai che <span style='opacity:1;font-size:200%'>DIO</span>esiste</span> 

Vorrei che sia tutto opaco tranne "DIO", però quando vado a vedere il risultato di quanto scritto qui, in Google Chrome e Firefox l'opacità viene portata a 0.3 per l'intero testo.

In Internet Explorer 9, l'opacità non viene applicata proprio.

Perchè? Cosa ho sbagliato?

[Prill]

Non inserire due span annidati, chiudi il primo span prima di "dio" e lì apri il secondo con le nuove dimensioni del font (non è necessario specificare l'opacity).
Ma: se ie9 lavora in modalità compatibile non riconoscerà la proprietà opacity (e sarebbe necessario aggiungere il filter alpha oltre a uno zoom:1 nel css essendo i filtri applicabili solo a elementi blocco e non a uno span)

[Gotchabest]

scusa l'ignoranza.. ehm... in pratica?

[Prill]

L'opacity è ereditata, quindi è applicata a tutto ciò che è interno a un contenitore sul quale è stata impostata. Perciò potresti avere

nel css

.span1 {
	font-family:"Times New Roman", Times, serif;
	font-size:150%;
	opacity:0.3;
}
.span2 {
	font-family:"Times New Roman", Times, serif;
	font-size:200%;
}

e poi

<span class="span1">Tu non sai che </span><span class="span2">DIO</span>
<span class="span1">esiste</span>

oppure

.paragrafo {
	font-family:"Times New Roman", Times, serif;
	font-size:200%;

}
.span1 {
	font-size:150%;
	opacity:0.3;
}

<p class="paragrafo"><span class="span1">Tu non sai che</span> DIO <span class="span1">esiste</span></p>

Su Explorer: solo la versone 9 supporta opacity, non le precedenti, per le quali si usava codice proprietario apposito. Lo stesso Explorer9 in assenza di un Doctype o in presenza di un Doctype incompleto, o lavorando in modalità compatibile per scelta dell'utente, si comporta come le vecchie versioni. Per una compatibilità all'indietro, cioè per avere la trasparenza anche nelle versioni precedenti dovresti aggiungere altro codice, magari in un css apposito. Se non ti importa di quelli va bene così, del resto la trasparenza non è particolarmente apprezzabile su una riga di testo e non vale la pena forse di perderci troppo tempo

[0-c00l]

In piu' nel css metti:

 filter:alpha(opacity=30);
-moz-opacity: 0.3;
-webkit-opacity: 0.3;

Almeno li rendi visibili correttamente anche su IE, Mozilla e Safari