问题
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?
回答1:
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.
回答2:
Not 100% sure, but this could be because IE has trouble with opacity on transparent PNGs: See this SO question
回答3:
I normally end up resorting to semi-transparent .PNG's. It's a nicer solution than CSS hacks when you need to support IE6 and some versions of IE7
回答4:
PNG Images works great in such cases.
来源：https://stackoverflow.com/questions/2944022/css-opacity-not-working-in-ie7