Lavorando all’ennesimo sito internet avevo la necessità di gestire in maniera dinamica l’opacità di alcune immagini. Più precisamente si trattava di bottoncini in formato PNG che, quando non attivi, dovevano diventare semitrasparenti in modo da essere visibili ma comunque in secondo piano rispetto al resto della pagina.

Dopo una breve ricerca, la buona notizia: è possibile gestire l’opacità delle immagini direttamente via CSS, senza dover necessariamente creare due immagini differenti. La cattiva notizia? Il codice CSS che gestisce l’opacità è differente a seconda che si usi Firefox (e con lui ogni altro browser ragionevole che sia stato inventato) o Internet Explorer. Nonostante questo, però, si possono inserire entrambi i codici per gestire l’opacità, e il browser riconoscerà soltanto “quello che gli compete”.

Ma tagliamo corto e passiamo al codice!

Firefox & Altri browser ragionevoli: si fa variare il valore dell’opacity da 0 a 1

opacity:0.3;

Internet “Bleah” Explorer: si impostano i filtri di opacità tra 0 e 100, come segue

filter: alpha(opacity = 50);

Un piccolo esempio (provate con browser differenti):

Immagine originale

Opacità importata mediante la CSS opacity

Opacità impostata mediante i filtri alpha per Internet Explorer

Se non si fosse capito, ribadisco…

Offrimi un caffè!

Ti è piaciuto l'articolo? Le informazioni che hai letto ti sono state utili?
Clicca sulla tazza per offrimi un caffè e supportare questo blog!