Home

Transparante PNG's in Internet Explorer

Tue, 06/26/2007 - 08:27 — Bart

PNG afbeeldingen zijn een veelgebruikt middel als het gaat om transparantie. Het enige nadeel aan deze techniek is dat Internet Explorer 6 niet om kan gaan met transparante PNG afbeeldingen. De afbeeldingen krijgen standaard namelijk een soort lichtblauwe achtergrond, waardoor de transparantie zelf geen nut meer heeft. Er is echter een methode om IE6 PNG's toch goed weer te laten geven: AlphaImageLoader().

AlphaImageLoader() kan zowel via CSS als Javascript op een element toegepast worden. Dit artikel behandelt de CSS methode, omdat Javascript niet altijd aan staat. Met deze functie kan je meerdere dingen doen, waaronder het toekennen van een achtergrond aan een object met de sizingMethod eigenschap:
filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='/pad/naar/afbeelding.png', sizingMethod='scale')

De sizingMethod eigenschap kan de volgende waardes hebben (bekijk de voorbeelden zowel in IE als in een browser die PNG afbeeldingen wel goed ondersteunt):

  • image: de box wordt zo vergroot of verkleind dat deze net zo groot als de afbeelding is. (voorbeeld)
  • scale: de afbeelding wordt zo vergroot of verkleind dat deze precies in de box past. (voorbeeld)
  • crop: Zowel de box als de afbeelding behouwen hun originele grootte. (voorbeeld)

Je ziet dat het gebruik van AlphaImageLoader() zowel mogelijkheden beidt als beperkingen kent. In tegenstelling tot background van CSS kan je niet in één richting repeaten. Wil je bijvoorbeeld repeat-y simuleren, dan moet je de box even breed als de afbeelding maken en sizingMethod='scale' gebruiken. Maak je de box breder, dan rekt ook de afbeelding uit. Een andere eigenschap waar je op moet letten is dat de afbeelding achter de border langs gaat.

In de voorgaande voorbeelden is een rechthoekige afbeelding gebruikt om duidelijk de effecten van de verschillende waarden van sizingMethod te laten zien. Onderaan de pagina stonden echter nog twee voorbeelden. Mocht je door de eerste Druplicon (Drupal logo) nog niet overtuigd zijn van deze methode, kijk dan eens naar het laatste voorbeeld. Precies dezelfde afbeelding en dezelfde code, alleen nu met een rode achtergrond. Zowel in Firefox, Opera, enz. als in Internet Explorer.

Meer informatie over AlphaImageLoader is te vinden op het MSDN.