Nello STYLE dovremmo immettere più di una terminologia per definire l' OPACITY:

 style="display: none; position: absolute; top: 0px; left: 0px;
        width: 100%; height: 100%; background-color: #000000;
        opacity: 0.8; -moz-opacity: 0.8; filter: alpha(opacity=80); text-align: center;"
Questo per garantire il funzionamento con tutti i Browser.

opacity: ;   è il termine "ufficiale" secondo il W3C e rientra nei CSS3 (Cascading Style Sheets Level 3); ma nel contempo i progettisti dei vari Browser la stavano implementando sui propri prodotti con linguaggi diversi.

-moz-opacity: ;   è stata introdotta sui Navigatori Netscape; entrambe accettano valori da 0 (totale trasparenza) a 1 (piena opacità).

filter: alpha(opacity=50);   è proprietaria di IExplorer ed accetta valori da 0 a 100.


Per cui possiamo incontrare dei Browser che interpretano quella "ufficiale" e la propria, o solo la propria terminologia.

Un Browser Mozilla ad esempio, potrà interpretare   -moz-opacity: ;   e se recente anche   opacity: ;   ma ignorerà   filter: alpha(opacity=50);   nel Tag; la presenza di quest' ultimo non crea conflitto, semplicemente una proprietà sconosciuta da quel Browser, viene da questo ignorata.

Mentre invece, Internet Explorer 6 e 7 riconoscono soltanto   filter: alpha(opacity=80);

Se poi capitassero utenti con Navigatori troppo antiquati che in nessun modo codificano l' opacity, allora vedranno la foto grande su sfondo completamente nero (senza alcuna semi-trasparenza); ma questo, vale anche se tu avessi Lightbox.


Fortunatamente, il   display: none/block;   vale per tutti.