Effetto trasparenza per div

andrex1191

Utente Attivo
5 Apr 2011
78
0
0
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

Utente Attivo
28 Mar 2011
1.694
0
36
è semplicissimo. Basta inserire nella classe del div (quindi codice CSS) che vuoi rendere trasparente questo comando:
HTML:
  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.
 
Ultima modifica:

andrex1191

Utente Attivo
5 Apr 2011
78
0
0
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

Utente Attivo
3 Giu 2011
38
0
0
Ciao, usa la funzione rgba()

Codice:
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

Utente Attivo
28 Mar 2011
1.694
0
36
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().
 

TheTrigger

Utente Attivo
3 Giu 2011
38
0
0
Devi procedere così:

Codice:
 /* Codice CSS */
body {
	background:url(LaTuaImmagineDiSfondo.jpeg);
}
.classediv{
	background:rgba(70,100,20,0.4);
}
Codice:
<div class="classediv">Contenuto blablablablablablablablablablabla</div>
 

max_400

Utente Attivo
23 Gen 2009
770
0
16
caltanissetta
max400.forumfree.it
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
Codice:
<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

Utente Attivo
5 Apr 2011
78
0
0
Devi procedere così:

Codice:
 /* Codice CSS */
body {
	background:url(LaTuaImmagineDiSfondo.jpeg);
}
.classediv{
	background:rgba(70,100,20,0.4);
}
Codice:
<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

Utente Attivo
3 Giu 2011
38
0
0
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

Utente Attivo
5 Apr 2011
78
0
0
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 :)