Question

你好！ 有人可以回答我的问题吗？我在CSS + Javascript中开发了一个简单的雾效果。它适用于Firefox，Opera和Chrome。问题仅存在于IE和Edge上。该效果使用JS在桌面（div标签）上移动两个背景图像。微软web浏览器除了纹理之外还显示了奇怪的盒子。它看起来像副作用。问题将在网站上找到：

https://www.kubera.info/

CSS：

#fog_one {
background-repeat: repeat-x, repeat-x;
background-attachment: fixed, fixed;
background-image: url(/obrazy/marmur.png), url(/obrazy/marmur.png);
background-size: 128% 132%, 110% 128%;
z-index: -2;
position: fixed;
left: 0;
top: 0;
right: 0;
bottom: 0;
}

使用Javascript：

var fog_one;
function RenderFog()
{
        var Mil = MonadTimeVar.getMilliSeconds();
        fog_one.style.backgroundPosition = ''.concat(Math.ceil(Mil / 48),
'px ', Math.ceil(Math.sin(Mil / 1024) * Math.sin(Mil / 1240) * 8), 'px',
',', Math.ceil(-Mil / 72), 'px ', Math.ceil(Math.cos(Mil / 920) * 12),
'px');
}
function FogLoaded()
{
        fog_one=document.getElementById('fog_one');
        return setInterval(RenderFog,30);
}

是否有解决方法，是否存在我的错误？

Answer 1

即使是现代版本的Microsoft浏览器也无法支持具有透明度的更复杂的PNG文件，看起来您的PNG至少是24位或32位，并且没有使用Microsoft支持的透明方法。

基本上，看起来你的像素中有部分透明，而MS需要每个像素都是彩色或透明（不是部分透明的彩色像素）。

尝试将另一个作为8位文件生成，或者使用'indexed'选项 - 这是一个有用的页面，如何：https://meta.wikimedia.org/wiki/Fixing_transparent_PNGs

你可能真的很难在IE或Edge中获得你想要的效果，因为根据你的雾层，每个像素可能需要打开或关闭，所以你可能更好地检测IE浏览器，而且只是具有静态背景。

背景图像和javascript显示工件

1 个答案: