DZone Snippets is a public source code repository. Easily build up your personal collection of code snippets, categorize them with tags / keywords, and share them with the world

Snippets Manager

Snippets has posted 5883 posts at DZone. View Full User Profile

PNG-24 Alpha Support For IE

04.03.2006

| 6950 views |

        What so much webdesigners dream about!
Get alpha channel on web, that's possible with PNG-24 images and this trick.
BE CAREFUL: that seem to work only for 10 images per page.

  # Display PNG-24 images with alpha channel on IE
  # BE CAREFUL: with this trick, only 10 PNGs seems to be supported by IE
  # Don't forget to set the size of your div
  def transpng(id, png)
    '<style type="text/css">
      <!--
        ' + id + ' {
          background-image: url(' + png + ');
        }
      -->
    </style>
    <!--[if IE]>
    <style>
      ' + id + ' {
        background-image: none;
        filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src=' + png + ', sizingMethod=\'scale\');
      }
    </style>
    <![endif]-->'
  end

Tags:

Comments

Snippets Manager replied on Wed, 2006/07/19 - 2:16pm

Nice snippet, but this method has a few flaws. First of all, the space on top of the background image is 'dead'; links cannot be clicked on. I've also noticed inconsistent renderings on Windows XP SP1 vs. SP2 IE does support 8-bit PNGs, so if you desperately need PNG support but can do without the alpha channels thats another option