Bästa sättet att använda genomskinliga bilder på webben

Uppdatering: Ett fel hade letat sig in i koden nedan. Nu är den fungerande. Exempel finns här:

Genom åren har man använt olika tricks för att använda alpha transparenta png bilder på webben. Dessa används t ex för att skapa halvgenomskinliga skuggor eller logotyper med kantutjämningar.

Klistra in följande rader i din kod och ange class=”alphaImage” eller class=”alphaBackground” i din layout så sköter sig resten själv. Firefox och Internet Explorer 7 har inbyggt stöd för detta och följande ”hack” är till för att IE 5.5 och IE 6.0 ska visa bilderna korrekt. Koden fungerar både bra för vanliga bilder men också för bakgrundsbilder i tabellceller (ändra till runtimeStyle.backgroundImage om du hellre använder ”div style=”background-image” istället).

Läs mer om detta på : http://www.stilbuero.de/2006/03/15/png-alpha-transparency-fast-and-easy/

Det finurliga med koden är att den anges på ett ställe och till skillnad från htc-metoden som liknade denna i utförandet går denna snabbare och genererar inget blinkande medan htc filen laddas.

<!--[if lte IE 6]>

* .alphaBackground {

background: expression(

this.runtimeStyle.filter = 'progid:DXImageTransform.Microsoft.AlphaImageLoader(src="' + this.background + '", sizingMethod="scale")',

this.runtimeStyle.background = ''

);

}

* .alphaImage {

background-image: expression(

this.runtimeStyle.filter = 'progid:DXImageTransform.Microsoft.AlphaImageLoader(src="' + this.currentStyle.backgroundImage.split('\"')[1] + '", sizingMethod="image")',

this.runtimeStyle.backgroundImage = 'none',

this.src = '/images/indent.gif' /* byt ut denna till din egen transparanta gif bild */

);

}

</style><![endif]-->

Christian Landgren
2007-08-13