如何在下面的元素被动画化时强制 IE 继续对覆盖应用不透明度？

Posted 2023-03-06

【中文标题】如何在下面的元素被动画化时强制 IE 继续对覆盖应用不透明度？

【英文标题】：How can I force IE to keep applying opacity to an overlay while the element underneath is being animated?

【发布时间】：2012-01-11 21:26:27

【问题描述】：

我有一个包含叠加层的幻灯片（使用 jQuery Cycle）。叠加层使用 CSS 不透明度和过滤器。 jQuery 对动画也是如此。

在 IE 6/7/8 中，用于提供覆盖不透明度的过滤器在动画运行时失败并显示为灰色。

我认为问题在于 IE 不能同时使用两个过滤器。反正有这个吗？

所有代码都在 JSBin 上： http://jsbin.com/ucizox/6/edit

【问题讨论】：

为什么不直接使用透明 png 作为 .trans div 的背景图片？

谢谢你，约翰。我在使用不透明度的道路上走得很远，我没有考虑过使用透明图像。

我仍在为现代浏览器使用不透明度，并使用 star hack 将透明图像定位在 IE 6/7/8。

是的，我个人会坚持使用重复的透明图像。我不知道使用 opacity 的理由，除非你在某些东西上淡化 alpha。对我来说，这只是重复工作，当你想要不同的颜色/透明度时，你必须改变两个地方。

我在考虑页面性能和限制 HTTP 请求。该透明图像仅用于样式目的。如果我可以改用 CSS，我会每次都这样做。

【参考方案1】：

我曾经遇到过类似的问题，使用 jQuery 的 .fadeOut() 无法为我在 IE 中淡出的元素的子元素设置不透明度动画。 那时，我通过添加告诉子元素专门继承其父元素的 filter 属性的 css 解决了这个问题，例如：

fadeElement * 过滤器：继承；