Filter gray image, black around png in Internet Explorer 8

In Internet Explorer 8, applying grayscale filters to PNG images often creates unwanted black backgrounds. This happens because IE8's filter system doesn't handle PNG transparency properly when multiple filters are applied.

The Problem

When using BasicImage(grayscale=1) filter on PNG images with transparency in IE8, the transparent areas become black instead of remaining transparent.

Solution: Combining Gradient and BasicImage Filters

The solution is to combine a transparent gradient filter with the grayscale filter in a single filter declaration:

progid:DXImageTransform.Microsoft.gradient(startColorstr=#00FFFFFF, endColorstr=#00FFFFFF)
progid:DXImageTransform.Microsoft.BasicImage(grayscale=1)

Complete CSS Implementation

.demo {
    background: transparent;
    -ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr=#00FFFFFF,endColorstr=#00FFFFFF) progid:DXImageTransform.Microsoft.BasicImage(grayscale=1)"; /* IE8 */
    zoom: 1;
}

How It Works

The gradient filter with identical transparent start and end colors (#00FFFFFF) preserves the PNG's alpha channel transparency, while the BasicImage filter applies the grayscale effect. The zoom: 1 property triggers IE8's hasLayout, ensuring the filters render correctly.

Key Points

• #00FFFFFF represents fully transparent white
• Both filters must be in a single -ms-filter declaration
• zoom: 1 is required for proper IE8 rendering
• This solution maintains PNG transparency while applying grayscale

Browser Compatibility

This technique is specific to Internet Explorer 8. Modern browsers use CSS filter: grayscale(100%) instead of Microsoft's proprietary filters.

Conclusion

Combining transparent gradient and grayscale filters in IE8 preserves PNG transparency while applying the desired visual effect. This workaround prevents the common black background issue with filtered transparent images.