Effetto CSS opacizzazione immagini!

[Naroku95]

Ciao a tutti, oggi voglio pubblicare una guida scritta da me qualche tempo fa su come opacizzare in HTML e CSS una o più immagini sul vostro sito internet.

Allora, di sicuro conoscerete il codice HTML per inserire immagini:

Codice:

<img src="url immagine" alt="alt immagine">

Benissimo, il codice che vi presento oggi ha la stessa funzione del precedente:

Codice:

<img style="-ms-filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=70);filter:alpha(opacity=70);-moz-opacity:0.7;opacity: 0.7;-khtml-opacity: 0.7;" src="URL-IMMAGINE"/>

Potete comunque cambiare i valori 70 e 0.7 con, per esempio 45 e 0.9 per ottenere i vari effetti di opacità immagine, velocità dell'illuminazione e via dicendo.

[Mattia]

Nel parametro style dell'immagine hai inserito i metodi per i vari browser per l'opacità e non sono diversi parametri.
"70" e "0.7" sono valori equivalenti: il primo è per i browser che utilizzano una scala da 0 a 100 e il secondo è i browser che utilizzano una scala da 0 a 1.
Il metodo standard supportato dall'ultima versione di tutti i browser più utilizzati è (al posto di "0.7" si può mettere un qualsiasi valore da 0 a 1):

Codice:

opacity: 0.7

Tutti gli altri metodi servono per supportare le vecchie versioni dei browser. Ecco la spiegazione di ogni singolo metodo utilizzando un file CSS esterno:

Codice:

img{
    filter: alpha(opacity=70); /*Internet Explorer 6 & 7*/
    -ms-filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=70); /*Internet Explorer 8*/
    -moz-opacity: 0.7; /*Vecchie versioni di Mozilla Firefox*/
    -khtml-opacity: 0.7; /*Vecchie versioni di Safari*/
    opacity: 0.7; /*Versione corretta di CSS3 supportata dai browser moderni*/
}

[Naroku95]

Io consiglio l'upgrade e vari aggiornamenti di softwares e plugins da sempre ovunque in qualsiasi campo per restare aggiornare e sfruttare sempre le ultime tecnologie. Io credo che così facendo l'uomo possa andare avanti. Comunque sì, hai ragione sul mio utilizzo del codice ma quando ho scritto la guida trovai in rete un codice molto simile e decisi di riscriverlo completo e quando lo provai funzionava utilizzando chrome, mozilla, internet explorer, maxthon ecc. ecc.

[Mattia]

In questo momento quasi tutti utilizzano i browser più moderni per l'autoaggiornamento e gli unici browser vecchi da supportare con un minimo di diffusione sono le vecchie versioni di Internet Explorer. Quindi suggerirei di utilizzare solo i metodi con filter, -ms-filter e opacity.