CAN IE7可以在两个不同的不透明度上显示两个div吗?

时间:2011-05-23 14:38:48

标签: javascript internet-explorer-7 opacity

我正在尝试构建一个简单的交叉渐变效果。我使用两个包含图像的div。两者都有“position:absolute”属性和负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;
}

非常感谢

1 个答案:

答案 0 :(得分:0)

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