Question

我尝试设置具有.png背景的div的不透明度。

<div id="image" style="background:url('background.css') repeat-x";></div>

为此，我使用此代码：

$("#image").stop().animate({
    opacity: 1
    }, 1000, "easeInOutSine", function() {

    $("#image").stop().animate({
        opacity: 0
        }, 1000, "easeInOutSine");

});

最近的浏览器没问题。但是在IE 7和8中，透明度是黑色的...我找了一个解决方案但没有效果。有人可以帮帮我吗？

由于

Answer 1

IE8及更早版本确实真的支持不透明度。

他们所拥有的支持是非标准的，并且充满了bug。你根本不能使用标准的opacity风格;他们必须使用非标准的filter风格，这并不好。像动画一样的东西永远不会好起来，如果你能让它工作的话。

我能给出的最好建议就是接受这些旧版浏览器并且不支持这样的现代功能。为他们提供不涉及动画的后备。

Answer 2

我写这篇文章因为很难找到一个好的解决方案。这个检测低于IE9并修复您想要设置动画的所有图像（具有不透明度）。

/* 
1. Include jQuery , for example 1.8.3.
2. Give the images class 'fixIE8'.
3. Save an full transparent image named 'trans.png'. */


function fixIE8() {
        $(".fixIE8").each(function(){

        var imageWidth  = $(this).width();
        var imageHeight = $(this).height();
        var imageSource = $(this).attr('src');
        var imageStyle  = $(this).attr('style');

        $(this).attr('width', imageWidth);
        $(this).attr('height', imageHeight);
        $(this).attr('src', 'trans.png');
        $(this).attr('style', ''+imageStyle+' background: transparent; background-image:none; filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src="'+imageSource+'"); }');

        })
    }

    function IEversion() {

        var userHeader = navigator.userAgent;

        if (userHeader.indexOf('MSIE') !== -1) {
            var MSIE            = userHeader.indexOf('MSIE');
            var versionAt       = MSIE + 5;
            var browserVersion  = userHeader.charAt(versionAt);
            return browserVersion;
        }
    }

    $(document).ready(function(){
        if (IEversion() < 9) { fixIE8(); }
    })

IE8不透明度在png上透明动画

2 个答案: