背景图像和 javascript 显示工件

Question

你好！ 请问有人可以回答我的问题吗？ 我在 CSS + Javascript 中开发了一个简单的雾效果。 它在 Firefox、Opera 和 Chrome 上运行良好。 该问题仅存在于 IE 和 Edge 上。 该效果使用 JS 在桌面上移动两个背景图像（div 标签）。 Microsoft 网络浏览器会在纹理之外显示奇怪的框。 看起来像是副作用。 目前在网站中发现问题：

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 位文件，或使用“索引”选项 - 这是一个关于如何操作的有用页面： https : //meta.wikimedia.org/wiki/Fixing_transparent_PNGs

你可能真的很难在 IE 或 Edge 中获得你想要的效果，因为每个像素可能需要打开或关闭，这取决于你的雾层，所以你可能会更好地检测 IE 浏览器，并且简单地有一个静态背景。