Opacity e testi

[Think]

ciao

vorrei realizzare un box opaco nero che lasci in traparenza la foto sotto.
e fin qui ho usato questa guida (esempio 3):

http://www.w3schools.com/Css/css_image_transparency.asp

e viene molto bene.


Il mio problema è quando ci devo scrivere dentro.

Se scrivo senza il box nero, con testo bianco viene così:



e va bene in quanto il testo rimane bianco al 100%.



Quando però applico il box opaco sotto:



il testo non è più bianco 100%, ma prende anche lui l'opacità!

ho già provato nel css del testo a mettere bianco, opacità 100, ma non va.

secondo voi come posso risolvere?

ciao e grazie

[bionicoz]

Non si può fare, i 2 workaround che mi vengono in mente sono:
a)Se sai quant'è alto il box trasparente, sotto (e non dentro) ci piazzi il paragrafo del testo con margin-top negativo pari all'altezza del box.

[html]
<div class="trasp"></div>
<div class="testo_dentro_trasp">

...</p></div>

[css]
.trasp{opacity:0.5; height 100px}
.testo_dentro_trasp{margin-top:-100px;}

b) usi come background del div quadrato un .png semitrasparente (anche grosso solo 1px) e scrivi il tuo

direttamente dentro.

Personalmente sceglierei il secondo metodo. ciao.

[codencode]

In alternativa, il problema viene risolto dai CSS3 con le regole rgba che permettono di definire la trasparenza in modo indipendente per il contenuto ed il contenitore. Il problema è lo scarso supporto da parte di IE.