1

我遇到了让透明度在 IE8 中与fadeTo 结合使用的问题。在我的背景图像 (PNG) 上保持透明度，而不是淡入和淡出，而是有一个令人讨厌的黑色边框，否则透明度会是这样。

我已经搜索了高低，虽然这里有很多似乎很好的答案，但我找不到适合我的答案，我不知道为什么。

这是我的代码：

    jQuery(document).ready(function($) {

        InOut($('#bubblewrap li:first'));

        function InOut(elem) {
            elem.delay().fadeTo(1500, 1).delay(700).fadeTo(1500, 0, function() {
                if (elem.next().length > 0) {
                    InOut($(this).next());
                }
                else {
                    InOut($(this).siblings(':first'));
                }

            });
        }

        $('#bubblewrap li').mouseover(function() {
            $(this).siblings().add(this).stop(true, false).css("opacity", 0);
            $(this).show().css("opacity", 1);
        });
        $('#bubblewrap li').mouseout(function() {
            if ($(this).is(":visible") == true) {
                InOut($(this));
            }
        });
    });

有人对如何将 SO 上的一些常见解决方案应用于我的代码有任何建议吗？非常感谢任何和所有帮助。

4

1 回答 1

1

IE8（作为较老的 IE）无法处理半透明（即 png）元素的不透明度。这正是您在那里看到的。通常设置背景颜色（因此元素没有半透明像素）以及图像会有所帮助。

在您的情况下，您可以考虑 a) 不褪色，但仅在 IE<9 时显示 b) 使用 jpg 图像的一部分作为背景，并将 png 放在其上（需要额外的元素） c) 使用 css3 边框半径和框阴影重新创建效果并让 css3pie 处理它。但它可能不适合动画 - 没有尝试过。

于 2012-04-11T10:08:36.560 回答