Sfondo Nero e Opaco

**Allen Walker** · 27-10-2010, 08:05

Vi è mai capitato di vedere lo script in javascript dove quando si clicca su una foto lo sfondo si fa nero con opacità ed appare al centro l'immagine con descrizione e pulsanti next e prev???

Vorrei sapere come creare quella stessa opacità nera quando clicco su una foto per aprire un div a centro pagina con spiegazioni...

Avete idee?

**Mich_** · 27-10-2010, 09:12

Non so se quello che chiedi e` una galleria. In tal caso fa' una ricerca in rete: magari puoi partire da quelle riportate tra i "link utili"

Comunque se il problema e` su come programmare il JS, chiedi che spostiamo la discussione nel forum relativo.
Se invece e` come realizzare il CSS necessario, sei nella sezione coretta:
quello che ti serve e` un livello ("layer" nei vecchi Netscape 4) che si sovrappone a tutta la pagina:
Al giorno d'oggi un livello viene creato mediante un <div> con dimensioni 100% e sfondo opportuno che contiene a sua volta un<div> centrato con la tua immagine (e i bottoni necessari). Sia il livello con sfondo scuro che il resto della pagina devono avere posizionamento assoluto e z-index opportuno.

Per attivare o "spegnere" tale livello avrai comunque bisogno di JS che modifica il display del livello:
document.getElementById('ID_OPACO').style.display = 'block';
document.getElementById('ID_OPACO').style.display = 'none';

**Allen Walker** · 27-10-2010, 10:04

Era proprio quello che volevo sapere

la modifica del css... per il js nn ci sono problemi ho già tutto pronto.. solo che quando mettevo il 100% a width e ad height andava fuori pagina... forse il div devo metterlo dentro il body e nn indentato in altri div... ma la z-index è crossbrowser? ho letto da qualche che da problemi con ie delle volte -.-"

**Mich_** · 27-10-2010, 10:31

Il 100% e` una misura relativa.
Relativa al contenitore di quello che si sta formattando.
Quindi non ha senso usarla se il contenitore non ha la dimensione settata. E se questo ha misura % la cose e` ricorsiva.

Quindi con una struttura di questo tipo:

codice:

<body>
  <div id="wrapper">
    ... qui il resto del sito ...
  </div>
  <div id="copertura">
    <div id="messaggio"> ... immagine e bottoni ... </div>
  </div>
</body>

il CSS dovra` avere una struttura del tipo:

codice:

html, body { /* necessario fissare le dimensioni di questi oggetti */
  width: 100%;
  height: 100%;
  overflow: hidden;     /* elimino scrollbar da questi elementi */
}
#copertura, #wrapper {
  position: absolute;
  top: 0; left: 0;
  width: 100%;
  height: 100%;
}
# wrapper {
  z-index: 10;
  overflow: auto;    /* sposto la scrollbar in questo elemento (dato che la ho tolta dal body) */
}
#copertura {
  z-index: 100;   /* piu` alto di wrapper */
  display: none;    /* di deafult non si vede */
  overflow: hidden;    /* no scrollbar qui */
  background: url(semitrasp_scuro.png);     /* opacizza quanto sta sotto */
}
#messaggio {     /* va centrato come 
  position: absolute;
  width: 50%;
  left: 25%;
  height: 50%;
  top: 25%;
  overflow: ...;  /* se serve si puo` inserire - altrimenti si puo` dimensionare piu` grande in modo che non serva mai */
}

Non mi risultano problemi con z-index, ma occorre che ci siano i posizionamenti assoluti.
Per le dimensioni vedi questo esempio grezzo

**Allen Walker** · 27-10-2010, 10:42

sisi grazie.. avevo fatto come hai scritto tu ora e mi era uscito

... ora però mi chiedo come cavolo impostare l'opacita anche con ie e gli altri browser >-<

**Mich_** · 27-10-2010, 11:04

Non si puo` usare l'opacita`.
Eventualmente si poterebbe usare l'opacita` dello sfondo, che utilizza un attributo dei CSS3 (vedi ad esempio questo articolo: Usare la trasparenza RGBa), ma non credo sia sufficientemente supportato.

L'opacita` (attributo opacity) renderebbe semitrasparente anche il "messaggio", e lo renderebbe poco leggibile.
Nell'esempio sopra ho usato un'immagine di sfondo semitrasparente, da riptere in vert e orizz, che devi realizzare tramite un programma di grafica.
Una buona resa la hai con una .png (non supportata da IE6, per cui devi aggiungere un filtro per tale brwoser). In alternativa puoi usare una .gif (resa non cosi` buona - viene realizzato mediante retinatura -, ma per grandi superfici puo` non essere male).

**Allen Walker** · 27-10-2010, 11:21

no vabp io avevo intenzione di mettere un div contenitore sopra tutto con z-index 100 per esemprio e metterlo con opacità 0.8 sfondo nero e sopra tutto con z-index 200 mettere un div in posizione centrale (top e left 50% e margini settati in negativo secondo width e height) dove inserire una immagine e una descrizione.. penso che con gli zindex così settati il div superiore si veda bene

**Mich_** · 27-10-2010, 11:38

A questo punto il livelli sono tre. Uno in piu`, che con la mia proposta non serve.

E ti torna il problema della opacita`, che in alcune versioni di IE ha necessita` di una sintassi proprietaria.

Per il posizionamento del blocco che io ho chiamato "messaggio", e` corretto quanto dici (posizionamento al 50% e top-left a meno meta` della larghezza/altezza).
Quanto ho proposto io e` una abbreviazione che si puo` usare quando anche le dimensioni sono in %: in pratica se devi mettere
width: 50%;
left: 50%
margin-left: -25%
puoi "abbreviare" con:
width: 50%;
left: 25%;
margin:left: 0;

**Allen Walker** · 27-10-2010, 11:53

Ah ok perfetto allora

quindi rimane il problema dell'opacità >_<... se provo a visualizzarlo con ie di sicuro si vedrà tutto nero.. come posso risolvere?

con un filter? per ie dal 5 in poi?
filtro per ie dal 5 in poi???
filter: alpha(opacity=80);
netscape???
-moz-opacity: 0.8;
safari??
-khtml-opacity: 0.8;
per tutti gli altri...
opacity: 0.8;

ora questi filtri mi vanno bene per il css2 o sono solo del css3??? mica creeranno problemi con la visualizzazione della pagina con gli altri browser???

**Mich_** · 27-10-2010, 12:10

Mi risulta che opacity sia ormai accettato da tutti (forse tranne IE), per cui non servono tutti i prefissi che vengono introdotti quando ci sono caratteristiche nuove ancora da accettare.
Invece per IE (dal 5 fino al 7 sicuro e non so per l'8) occorre il filter.

Quindi per avere una buona copertura dai browser (credo tutti quelli suati attualmente), dovrebbe essere sufficiente:
opacity: 0.8;
filter: alpha(opacity=80);

Eventualmente (per non avere errori nei validatori) il filter andrebbe messo dentro un commento condizionale.

Discussione: Sfondo Nero e Opaco

Strumenti discussione

Ricerca discussione

Visualizza

Sfondo Nero e Opaco

Permessi di invio