我正在尝试构建一个简单的交叉淡入淡出效果。我使用两个包含图像的 div。两者都具有“position: absolute”属性和负 z-index。
我将补间函数应用于 Firefox 和 Chrome 中的不透明度样式属性。我为 IE 使用 filter:alpha(opacity = foo) 。
我看到“旧”图像淡出,但"new"图像立即以完全不透明显示在“旧”图像之上,无论 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;
}
非常感谢
最佳答案
您是否尝试过为 ie7 的这些元素添加布局? IE。对于这两个元素(你想改变不透明度)设置 css 属性“zoom”(即特定的)值为“1”,看看它是否有帮助。通常这会有所帮助:)
关于javascript - IE7 可以在另一个之上显示两个具有不同不透明度的 div 吗?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/6098734/