Sulle trasparenze...

[ricman]

Dovrei fare un sito con un Div contenitore con dentro 2 Div, uno sotto l'altro, dove il div che sta Sotto "sbiadisce" l'immagine (oppure gli da un colore in semitrasparenza). No javascript, no Flash ecc... solo html e css... Inoltre non posso "giocare con la foto" tagliandola in quanto dovrà essere intera perchè può cambiare in qualsiasi momento. Essa sarà il background del Div principale.
Allego una foto per capire meglio... (se non si vede il link è questo: http://mrbaba.altervista.org/prv.jpg )



Pensavo di usare il codice per la trasparenza ma ho il problema che tutto il contenuto (compreso il tag P e un eventuale fotina) diventa trasparente. Mentr evorrei, ovviamente, che il testo si leggesse come se stesse al di sopra...

#sotto {
width: 400px;
height: 100px
filter:Alpha(Opacity=20);
-moz-opacity: 0.20;
opacity: 0.20;
}

[Mich_]

Qualsiasi cosa si muova (o cambi aspetto nel tempo) in una pagina sul client, viene gestita da JS.
Tranne per le gif con movimento incorporato.

Quello che chiedi credo sia possibile farlo con flash (o con il corrispondente standard Smil).
Una gif che cambia come sfondo la vedo un po' troppo pesante (una gif che cambia e` data da una serie diimmagini in sequenza).

Concludendo.
Mi pare che chiedi qualcosa che con il web attuale non riesci a fare in pratica, a causa di varie limitazioni, non ultima quella della trasmissione di grandi quantita` di dati.
Se non hai problemi di banda o di limiti sulle tecnologie usate (cosa che si verifica spesso nelle intranet), la cosa e` fattibile; in uno spazio aperto la vedo dura.

[ricman]

Originariamente inviato da Mich_
Qualsiasi cosa si muova (o cambi aspetto nel tempo) in una pagina sul client, viene gestita da JS.
Tranne per le gif con movimento incorporato.

Forse mi ero spiegato male.
Volevo fare quel gioco di trasparenza con una sola foto (un JPG) di sfondo. Solo che ogni tanto quella foto viene sostituita da un altra (il sito è in php/html). Non cerco animazioni, non uso gif, non ho Flash (e non lo so usare!!). La trasparenza come da codice nel primo post quasi riusciva nell'intento...
Alla luce delle mie ultime spiegazioni, non c'è proprio modo di sfruttarla?

[Mich_]

Premesso che la trasparenza non e` prevista dai CSS attuali (lo sara` nei CSS3, pare), e che non e` supportata da alcuni browser (Safari, Opera, ...), quel codice lo puoi applicare all'oggetto che vuoi.

Potresti ad esempio mettere l'immagine in un blocco e le scritte inun blocco di uguali dimensioni che ci sta sopra ...

Ma se la cosa ceh vuoi e` semplicemente un'immagine di sfondo attenuata, la cosa la ottieni facilmente applicando l'attenuazione all'immagine prima di linkarla: qualsiasi programma grafico e` in grado di realizzare cio`.

[ricman]

Originariamente inviato da Mich_
Premesso che la trasparenza non e` prevista dai CSS attuali (lo sara` nei CSS3, pare), e che non e` supportata da alcuni browser (Safari, Opera, ...), quel codice lo puoi applicare all'oggetto che vuoi.

Potresti ad esempio mettere l'immagine in un blocco e le scritte inun blocco di uguali dimensioni che ci sta sopra ...

Non riesco, appunto, ad applicare il codice a quello che voglio io... Mi sa che non ho capito il tuo suggerimento... Scrivo del codice di esempio. Potresti farmi capire meglio come far si che il testo non si sbiadisca insieme al resto? (per ora mi basta provare in questo modo... quando uscirà il css3?)

#main {
 position: absolute; top:50%; left:50%;
 height: 410px;
 width: 760px; 
 margin: -205px 0px 0px -380px;
 background-color: white;
 text-align: left;
 padding: 0px;
}
#sopra{
 
 height: 220px;
}
#sotto {
 width: 400px;
 height: 100px;
}

<div id="main" style="background-image: url(img/home_<?php print $sfondo; ?>.jpg); background-repeat:no-repeat;" >
  <div id="sopra"></div>
  <div id="sotto" style="
	filter:Alpha(Opacity=20);
	-moz-opacity: 0.20;
	opacity: 0.20;
  ">
    

Cantami, o Diva, del Pelìde Achille l'ira funesta che infiniti addusse...</p>
  </div>
</div>

[Mich_]

Comincia con il fare ordine. E` la condizione indispensabile per capire.
Usare un misto di CSS embedded e nella head contribuisce al disordine.

E poi perche` top e left al 50%? vuoi posizionare un blocco con l'angolo sinistro al centro della finestra?

[ricman]

Originariamente inviato da Mich_
Comincia con il fare ordine. E` la condizione indispensabile per capire.

Ho dato un po' più di ordine al codice e ho tolto il php così non ci rompe le scatole.
Il 50% serviva per il pezzo mancante del css che centrava la pagina. Al fine dell'esempio non serve centrare la pagina, quindi lo tolgo.
Non mi viene a mente altro... che dici?

#main {
 height: 410px;
 width: 760px; 
 background-color: white;
 background-image: url(img/home_1.jpg);
 background-repeat:no-repeat;
 text-align: left;
 padding: 0px;
}
#sopra {
 height: 220px;
}
#sotto {
 width: 400px;
 height: 180px;
 filter:Alpha(Opacity=20);
 -moz-opacity: 0.20;
 opacity: 0.20;
}

<div id="main">
  <div id="sopra"></div>
  <div id="sotto">
    

Cantami, o Diva, del Pelìde Achille l'ira funesta che infiniti addusse...</p>
  </div>
</div>

[Mich_]

Ci sono ancora delle cose dubbie.

A che ti servono i due blocchi (sopra e sotto)? Sono due blocchi che si sovrappongono o che si devono vedere separati?
Inoltre il blocco sopra, in qualche browser non viene interpretato, dato che e` vuoto. Devi metterci almeno uno spazio.
Io avevo capito che volevi attenuare l'immagine di sfondo, mentre nel tuo codice attenui il blocco sotto.

Se usi l'immagine come sfondo del main, non puoi attenuarla con i CSS. In tal caso ti conviene attenuare l'immagine con un programma grafico, prima di inviarla al client.

[ricman]

Originariamente inviato da Mich_
A che ti servono i due blocchi (sopra e sotto)? Sono due blocchi che si sovrappongono o che si devono vedere separati?

Non si sovrappongono, restano adiacenti uno sotto l'altro...

Originariamente inviato da Mich_
Inoltre il blocco sopra, in qualche browser non viene interpretato, dato che e` vuoto. Devi metterci almeno uno spazio.

Ok, mi serve perchè forse ci scrivo un breve testo (tipo slogan)... Per ora va bene uno spazio vuoto ()

Originariamente inviato da Mich_
Io avevo capito che volevi attenuare l'immagine di sfondo, mentre nel tuo codice attenui il blocco sotto.
Se usi l'immagine come sfondo del main, non puoi attenuarla con i CSS. In tal caso ti conviene attenuare l'immagine con un programma grafico, prima di inviarla al client.

Siccome non posso gestire l'immagine di sfondo personalmente (la gestirà qualcunaltro) pensavo di usare la trasparenza nel blocco "sotto". Tipo assegnargli uno sfondo trasparente (su FF ad esempio l'effetto voluto lo ottengo assegnado una png trasparente (anche colorata trasparente) al background del div "sotto").
Così "main" mi riquadra il tutto e assegna la foto di sfondo; "sopra" resta senza sfondo (quindi vedo la foto di sfondo del "main") e visualizza lo slogan; "sotto" contiene i testi del sito e "sbiadisce" l'immagine del "main".
[/QUOTE]

[Mich_]

"sotto" contiene i testi del sito e "sbiadisce"

Allora devi mettere uno sfondo semitrasparente al blocco sotto.
Quindi niente trasparenza del blocco, ma dello sfondo (da inserire con l'attributo background del CSS).