Box semitrasparente su sfondo

[WalterP]

Salve, ho creato una pagina HTML essa ha un CSS interno.
Ho impostato la grandezza della pagina intera tramite un <div> così definito nel CSS:

div.page {font-family: myriad Pro;font-weight: normal; font-size:12pt; color: rgb(0, 0, 0); width:1024px; height:768px;float:left; background-image: url(sfondo.jpg);}

ora nei <div> interni, dove verrà mostrato il testo, vorrei posizionare dei box semitrasparenti per esaltare i testi contenuti in esso.
Come posso fare?
Avevo pensato di mettere uno sfondo al <div> interno, tale sfondo (bianco o grigio) sarà proprio il mio box... solo che deve essere semitrasparente!

Grazie.

[vdesigns]

Puoi creare uno sfondo in photoshop, anche molto piccolo, semitrasparente, salvandolo in .png e impostandolo in repeat con i css, in questo modo non appesantisci la pagina.

Oppure utilizzi la proprietà opacity nei CSS

opacity:0.4; filter:alpha(opacity=40);

ma tieni conto che non tutti i browser la supportano.

[simotenax]

nota aggiuntiva:
l'opacity incide anche sull contenuto del div a cui viene applicata, quindi se c'è del testo dentro anche quello diventerà semitrasparente..

[softhare]

Devi necessariamente usare due div sovrapposti (layers).

In quello sottostante definisci lo sfondo (anche un semplice colore pieno va bene, senza scomodare elementi grafici non necessari) e ne impostai la trasperenza con opacity:0.4; filter:alpha(opacity=40);

Io aggiungerei anche MozOpacity:0.4;KhtmlOpacity:0.4; etc.

Nel div sovrapposto metti i contenuti che vuoi.

Il problema starà nel sincronizzare posizione e dimensioni dei due div, che dovranno coincidere.

Temo che l'utilizzo di png semi-trasparenti crei problemi di incompatibilità maggiori dell'uso dei vari attributi di opacità nei css.

Dubito che tu possa risolvere altrimenti...

[WalterP]

grazie per le risposte!

Allora ho creato un box semitrasparente è lo salvato in .png! Sembra funzionare! Devo testarlo con più browser.