colore di sfondo trasparente

[xnavigator]

in pratica nel body ho messo uno sfondo e sempre nel body c'è un div con un colore di background.. si può renderlo trasparente?

[elysaweb]

o lo fai dello stesso colore dello sfondo, oppure imposti come sfondo l'immagine che hai usato per il body (la parte che va sotto al div). ma se tu come background del div non metti nulla, di che colore te lo fa?

[xnavigator]

probabilmente non hai capito. ecco l'esempio:
http://windowsvistablog.com/

c'è il box azzurrino trasparente. (utilizza una png trasparente?)

[xnavigator]

up

[elysaweb]

Ho visto che per esempio il box in alto (quello in cui c'è sign in | join | help) fa parte dell'immagine stessa, ovvero con photoshop probabilmente hanno sovrapposto un livello leggermente trasparente alla foto.

Per il div centrale mi devo leggere con calma il codice, cmq so con certezza che esistono javascript che diminuiscono l'alpha di un colore di sfondo... Ho visto script simili anche qui su html!

[xnavigator]

Originariamente inviato da elysaweb
Ho visto che per esempio il box in alto (quello in cui c'è sign in | join | help) fa parte dell'immagine stessa, ovvero con photoshop probabilmente hanno sovrapposto un livello leggermente trasparente alla foto.

Per il div centrale mi devo leggere con calma il codice, cmq so con certezza che esistono javascript che diminuiscono l'alpha di un colore di sfondo... Ho visto script simili anche qui su html!

no. non fa parte dell'immagine stessa.
è una cosa apparte.

--

edit capito: hanno usato come sfondo una png trasparente.
grazie lo stesso dell'aiuto.

baci

[elysaweb]

attenzione perchè a quanto ne so le png non si vedono trasparenti su tutti i browser!

in ogni caso quello in alto fa parte dell'immagine...

cmq se vedi questo sito www.finimodena.it, lo sfondo delle news laterali, che sembra trasparente, in realtà fa parte dell'immagine di sfondo!

ciao ciao

[Hamlet75]

Ciao XNavigator,

Certo che è possibile renderlo trasparente.

Ti faccio un esempio pratico di qualcosa simile a ciò che uso io nel mio sito che sto sviluppando.


Nel file contentente gli stili css ho questo:

#info {
float:right;
background:url('../images/infocontent_mid.gif');
width:510px;
height:100%;
margin-top: 10px;
margin-right:2px;
margin-bottom:10px;
}

.post {
filter: alpha(opacity=80);
opacity: 0.8;
background: #ffffff;
height:100%;
padding:20px;
border-bottom:1px solid #666666;
border-left:1px solid #666666;
border-right:1px solid #666666;
}


......

Nella pagina html (php, asp, ecc.) dove lo vuoi usare metti qualcosa di simile:


<div id="info">
<div class="post">
<h2>
Testo di prova del post .....


aeiou 1234567890


</h2>
</div>
</div>

C'è il primo DIV "info" che è quello che ha come sfondo l'immagine e funge da contenitore.

Il secondo DIV "post" è contenuto nel primo (e volendo gli puoi dare tu le dimensioni che vuoi e posizionarlo dove vuoi all'interno del primo) ed è quello che sovrapponendosi al primo ti crea le trasparenze. Questo perchè ci sono le due righe nella dichiarazione del css

filter: alpha(opacity=80);
opacity: 0.8;

che servono proprio ad impostare il parametro alfa, per la trasparenza.

E' importante che li usi entrambe, perchè su alcuni browser serve il primo ed in altri serve il secondo per avere l'effetto di trasparenza.

Come puoi ben capire leggendo le due righe, il primo lo esprimi con un valore in [0 .. 100] mentre nel secondo devi specificare lo stesso valore però nell'intervallo [0 .. 1] (è ovvio che devi dividere il primo valore per 100).


Spero di essere stato abbastanza chiaro e che ti abbia detto le cose che intendevi tu.

Ciao!!!

[xnavigator]

Originariamente inviato da elysaweb
attenzione perchè a quanto ne so le png non si vedono trasparenti su tutti i browser!

in ogni caso quello in alto fa parte dell'immagine...

cmq se vedi questo sito www.finimodena.it, lo sfondo delle news laterali, che sembra trasparente, in realtà fa parte dell'immagine di sfondo!

ciao ciao

ma che hai capito? io intendo il box dove ci sono le priem 2 news non quello dov'è c'è sign in join ecc

[xnavigator]

Originariamente inviato da Hamlet75
Ciao XNavigator,

Certo che è possibile renderlo trasparente.
Spero di essere stato abbastanza chiaro e che ti abbia detto le cose che intendevi tu.

Ciao!!!

grazie
saluti

( cmq penso di utilizzare la png trasparente non so perchè mi ispira di più )