Web Design - Lunedì, Novembre 24, 2008 13:05 - 0 Comments

Sfruttare la trasparenza delle png su iexplorer!

Il formato PNG per le immagini è sempre più diffuso
sul web e con l’utilizzo delle trasparenze consente di ottenere ottimi
risultati, superiori a quelli che si hanno con le gif. Purtroppo mentre
con i vari Firefox, Opera, ecc.. tale caratteristica può essere
sfruttata, con Iexplorer non sono supportate le trasparenze, le quali vengono visualizzate come un alone bianco.

Ecco la soluzione al problema:

create un div container, naturalmente all’interno del vostro body, dopodichè create uno stile per la classe, inserendo il nome della vostra immagine

div.image {
background:url(image-transparent.png) no-repeat;
height:100px;
width:100px
}

Il codice sopra funziona per Firefox, adesso create un’altra classe per Iexplorer:

div.image {
background:none;
filter:progid:DXImageTransform.Microsoft.
AlphaImageLoader(src=’image-transparent.png’ ,sizingMethod=’crop’);
}

Etvoilà