Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

css opacity not working in IE7

I have this test page : http://jsfiddle.net/VWnm9/7/. The image is correctly faded on all my computers running IE7 or IE8, except for one computer that runs IE7 and doesn't fade the flower, even in noext mode.

The page is :

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
        "http://www.w3.org/TR/html4/loose.dtd">
<html lang="en">
<head>
    <style type="text/css">
        body {
            background: blue;
        }
        img {
            filter: alpha(opacity=10);
            opacity: 0.1;
        }
    </style>
</head>
<body>
    <img src="http://upload.wikimedia.org/wikipedia/commons/c/c3/Extracted_pink_rose.png" />
</body>
</html>

Does anybody have an idea why?

like image 760
Alsciende Avatar asked May 31 '10 14:05

Alsciende


1 Answers

You probably need to apply some of MS's filters.

Eg:

img {
    opacity: 0.1;
    -ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=10)";
    filter: alpha(opacity=10);  
}

More info about opacity on quirksmode.

like image 171
mqchen Avatar answered Sep 29 '22 08:09

mqchen