PNG Images With AlphaImageLoader
gif image
Background Text Visual filters are extensions to CSS properties that change the display of an object's contents. In some cases, filters create simple behaviors that could be implemented as script. In other cases, a filter goes far beyond script and modifies the rendered appearance of the content of an object. Using filters simplifies the task of incorporating sophisticated effects in Web documents. Static visual filters affect the display of content, while transitions affect the way content changes in an object are displayed. For a list of filters and transitions, see the Visual Filters and Transitions Reference.
Description

The moveable images to the right demonstrate the value of using AlphaImageLoader to display Portable Network Graphics (PNG) image files.

The Graphics Interchange Format (GIF) image can have only one level of transparency, while the PNG image has a full range of transparency. Move the PNG image over the GIF image to compare the transparency.

Transparency for PNG images is respected during text selection. This means that a user can select content that is displayed behind the fully transparent region of the image.

The PNG image has crisper edges independent of the backround color. To keep a sharp edge on a GIF image you must create a new image for each background color it will be used in.


<DIV ID="oFilterDIV" STYLE="position:absolute; top:50px; left:10px; width:240px; height:160px; padding:10px; font:bold 13pt verdana; background: yellowgreen; filter:progid:DXImageTransform.Microsoft.BasicImage(
grayscale=0, xray=0, mirror=0, invert=0, opacity=0, rotation=0)
"> This is the DIV content.</DIV>
©2007 Microsoft Corporation. All rights reserved. Terms of use.