【问题标题】:CAN IE7 display two divs with different opacity on top of one another?IE7可以显示两个具有不同不透明度的div吗?
【发布时间】:2011-08-31 05:19:11
【问题描述】:

我正在尝试构建一个简单的淡入淡出效果。我使用两个包含图像的 div。两者都有“位置:绝对”属性和负 z-index。

我将补间函数应用于 Firefox 和 Chrome 中的不透明度样式属性。我对 IE 使用 filter:alpha(opacity = foo)。

我看到我的“旧”图像淡出,但“新”图像立即以完全不透明度显示在我的“旧”图像之上,无论 z-index 和不透明度值如何。

我知道 IE7 在不透明度方面存在一些问题,但我不确定这是其中之一。我使用的是 JPEG 文件,而不是 .PNG。谁能解释我做错了什么?

一些代码:

var temporaryDiv = document.createElement("div");
var temporaryDivImage = document.createElement("img");
document.body.appendChild(temporaryDiv);
temporaryDiv.appendChild(temporaryDivImage);   
temporaryDivImage.src = backgroundPictures[currentPicture + 1];           
temporaryDiv.setAttribute("style", "overflow: hidden; filter: alpha(opacity=0); position: absolute; z-index: -2;");    
document.body.appendChild(temporaryDiv);

var background = document.getElementById("background");        

 if (isIE7 == true) {           
    Tweens[0] = new Tween(temporaryDiv.style, "filter", Tween.linearIn, 0, 100, 2000, "alpha(opacity=", ")");    
    Tweens[1] = new Tween(background.style, "filter", Tween.linearIn, 100, 0, 2000, "alpha(opacity=", ")");
} 

css:

body {
    margin: 0px;
    width: 100%;
    height: 100%;

}

#background {    
    position: absolute;
    overflow: hidden;
    z-index: -1;
}

非常感谢

【问题讨论】:

    标签: javascript internet-explorer-7 opacity


    【解决方案1】:

    您是否尝试为 ie7 的这些元素添加布局? IE。对于这两个元素(您想要更改不透明度)将 css 属性“缩放”(即特定于)设置为值“1”,看看它是否有帮助。通常这会有所帮助:)

    【讨论】:

    • 谢谢!我只是通过将所有 z-indexes 更改为正整数意外地解决了这个问题,明天我会看看你的解决方案是否也有效..
    猜你喜欢
    • 2011-05-13
    • 2011-09-10
    • 2011-07-05
    • 1970-01-01
    • 2013-09-14
    • 1970-01-01
    • 2012-08-28
    • 1970-01-01
    • 2014-03-20
    相关资源
    最近更新 更多