Effetto trasparenza per div

[andrex1191]

Salve a tutti,
sarei molto interessato a capire come funziona l'effetto trasparenza per i div, se bisogna lavorare con css-html oppure javascript.
Per intenderci l'effetto che mi interessa è come quello mostrato in questo blog: http://landofthelamp-home.blogspot.com/
dove sono 4 mi pare i div trasparenti..
Mi serve capire come ottenere lo stesso tipo di effetto..

Spero mi possiate linkare qualche guida adatta

grazie

 

[Longo8]

è semplicissimo. Basta inserire nella classe del div (quindi codice CSS) che vuoi rendere trasparente questo comando:

  opacity:0.5;

il numero lo puoi modificare come meglio credi. Esso va da 0 a 1. Rispettivamente: trasparente al massimo e NON trasparente. I valori intermedi come 0.5 ti fanno ottenere il risultato da te voluto.
Ti indico questo link all'esempio 3.

 

[andrex1191]

L'ho provato e a funzionare funziona, solo che oltre al div mi rende trasparente anche tutto il testo che c'è scritto all'interno :S
non capisco perchè

 

[TheTrigger]

Ciao, usa la funzione rgba()

background: rgba(100,100,100,0.4);

I primi 3 parametri stanno per Rosso, Verde, Blu (variano tra 0 e 255), e il quarto è la trasparenza (0~1)

 

[Longo8]

Ho provato a dare altre classi al testo ma, come dici tu, anche il testo viene opacizzato in quanto parte del link.
Anche se con un 0.5-0.6 l'effetto non è male...ma bisogna sempre vedere il colore del testo e quello dello sfondo.
Ho testato la funzione che segnala Trigger ed è buona. Se scegli come colore il giallo e lo posizioni su un div con sfondo rosso l'effetto opaco porta a farlo diventare arancione; il testo non viene "intaccato" dall'opacità con rgba().

 

[andrex1191]

Ho provato ad utilizzare anche rgba, ma non riesco comunque ad ottenere l'effetto richiesto...
Io vorrei solo il codice esatto per ottenere la trasparenza come su questo sito: http://landofthelamp-home.blogspot.com/

sto impazzendo

grazie comunque per le risposte

 

[TheTrigger]

Devi procedere così:

 /* Codice CSS */
body {
	background:url(LaTuaImmagineDiSfondo.jpeg);
}
.classediv{
	background:rgba(70,100,20,0.4);
}

<div class="classediv">Contenuto blablablablablablablablablablabla</div>

 

[max_400]

Cu-cù?..... è arrivato max....

Non so se questo vi può servire....

ecco l'esempio (testato browser firefox)
http://max400scuola.altervista.org/aaa/_altervista_ht/trasparenza.html

Si tratta di due DIV
- il primo e la foto in trasparenza
- il secondo la scritta che sta sopra alla foto

non so se vi può essere utile

<div style="opacity: 0.5;position:absolute;z-index:1">
<img src=ccc4.jpg width=250 height=300>
</div>
<div style="position:relative;z-index:2;"><h1>ciao</h1></div>

au revoir
by max :fonzie:

 

[andrex1191]

Devi procedere così:

 /* Codice CSS */
body {
	background:url(LaTuaImmagineDiSfondo.jpeg);
}
.classediv{
	background:rgba(70,100,20,0.4);
}

<div class="classediv">Contenuto blablablablablablablablablablabla</div>

Ho provato il codice, ma ho notato che il colore del div da rendere trasparente cambia a seconda dello sfondo...mentre nel sito d'esempio che ho linkato questo non accade..
e div sono Neri e trasparenti senza tener conto dello sfondo, e l'effetto visivo cambia notevolmente..

Mi sa che dovrò arrendermi

 

[TheTrigger]

Che i colori si 'mischino' è normale, nel sito sembra che non succede perché il colore del div e quello di sfondo sono entrambi sul grigio! Stai sbattendo la testa in un problema che non esiste, probabilmente hai impostato uno sfondo (del body) a tinta unita che ti ha fatto confondere..!

Fai una prova, salvati lo sfondo di quel sito, e crea un div con colore di sfondo sul grigio chiaro.. vedrai che hai lo stesso effetto... altrimenti sbagli qualcosa, se posti il codice ci dò un occhiata

EDIT: il colore in HEX è #666666, in rgb è 102, 102, 102

 

[andrex1191]

Che i colori si 'mischino' è normale, nel sito sembra che non succede perché il colore del div e quello di sfondo sono entrambi sul grigio! Stai sbattendo la testa in un problema che non esiste, probabilmente hai impostato uno sfondo (del body) a tinta unita che ti ha fatto confondere..!

Fai una prova, salvati lo sfondo di quel sito, e crea un div con colore di sfondo sul grigio chiaro.. vedrai che hai lo stesso effetto... altrimenti sbagli qualcosa, se posti il codice ci dò un occhiata

EDIT: il colore in HEX è #666666, in rgb è 102, 102, 102

credo tu abbia ragione, ho provato con lo sfondo di quel sito e l'effetto è quasi lo stesso..manca davvero poco, devo "giocare" un po con i valori dell' rgba per ottenere il colore che voglio (come quel sito) e devo trovare anche uno sfondo decente..
Almeno ora so cosa fare

Grazie mille