javascript - 在 Internet Explorer 上淡化图像透明度

Question

我正在使用一些 javascript 来淡化图像:一个从一个图像淡入另一个图像的画廊。图像也可以覆盖标题。标题后面的图像略微淡出，因此可以更清楚地看到标题:

background: #fff;
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=75)"; /* IE 8 */
filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=75); /* Older IEs */
opacity: 0.75; /* Real browsers */

但是，在 Internet Explorer 中，您会看到标题后面的下一张图片。这并不理想。 Demo .

看这里(screengrab)，在标题下面显示下一张图片:

注意:在 IE7、IE8 和模拟 IE7 的 IE8 中会出现此问题。有人告诉我，在 IE9 中看不到它，即使 IE9 用于模拟以前版本的 IE。模拟器显然不完美。

Answer 1

IE 无法处理 opacity 属性。你需要使用 hack:

background: #fff;
-ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=75)"; /* IE 8 */
filter: alpha(opacity=75); /* older IEs */
opacity: 0.75; /* modern browsers */

请注意，这些过滤器使用的范围是 0 到 100，而不是 0.0 到 1.0。像 jQuery 这样的框架可以为你做这件事，如果你动态分配样式，这真的很方便。