Css ie filter png image incompatible with ie6/ie7/ie8 solution

First, we select a png image with a translucent dot. The background color of the page is #660. Observe the performance of ie6/7/8. Because ie6 does not support translucent points, it turns gray.

<Style>
Body {background: #660}

Div
{
Position: absolute;
Filter: alpha (opacity = 20 );
Width: 256px;
Height: 256px;
}

Img
{
Position: absolute;
}
</Style>
<Div>

</Div>

This time, ie8 encountered a strange phenomenon: the img element was not applied to the filter! The reason is that it sets position: absolute. If you delete this sentence, it will be the same as ie7. It can be seen that ie8 also has a bug: the filter will not be applied to the absolute positioning child element! However, when <meta http-equiv = "x-ua-compatible" content = "ie = emulateie7"/> is added, the compatibility mode is okay.

<Style>
Body {background: #660}

. Out
{
Filter: alpha (opacity = 20 );
Width: 256px;
Height: 256px;
}

. In
{
Filter: progid: dximagetransform.microsoft.alphaimageloader(src+'alpha.png ');
Width: 256px;
Height: 256px;
}
</Style>
<Div class = "out">
<Div class = "in"> </div>
</Div>

After some tests, div nested img still does not work. We may wish to use div nested div without loading the image using background. If you have a good memory, you should know that ie has an alphaimageloader filter. Let's try to use it to load png: this is the right time! Not only does ie7 and ie8 correctly show that our ancestor IE6. Success!