Internet Explorer上的渐变图像透明度 [英] Fading Image transparency on Internet Explorer

问题描述

我使用一些javascript来淡化图片：一个图片库，从一个图片渐隐到下一个图片。图片也可以覆盖字幕。标题后面的图片稍微淡出，因此可以更清楚地看到标题：

I'm using some javascript for fading images: a gallery of images which fade from one to the next. Images can also have captions overlaid. The image behind the caption is slightly faded out, so the caption can be clearer seen:

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中，您会看到 / strong>后面的标题。这不是理想的。 演示。

In Internet Explorer, however, you see the next picture behind the caption. This is not ideal. Demo.

请参阅此处（screengrab），其中通过下图显示下图：

See here (screengrab), where under the caption the next image shows through:

注意：这个问题出现在IE7，IE8和IE8模拟IE7。它是，我被告知，在IE9中看不到，即使当IE9用于模拟以前的IE版本。

Note: This problem is seen in IE7, IE8, and in IE8 emulating IE7. It is, I am told, not seen in IE9, even when IE9 is used to emulate previous versions of IE. The emulator is obviously imperfect.

推荐答案

IE无法处理 opacity - 属性。您需要使用黑客：

IE is unable to handle the opacity-property. You need to use a 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， 1.0。像jQuery这样的框架为你做这些，如果你动态地分配样式，这是非常方便的。

Note that those filters use a range from 0 to 100 rather than 0.0 to 1.0. Frameworks like jQuery do this for you, which is really handy if you're assigning styles dynamically.

这篇关于Internet Explorer上的渐变图像透明度的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！