背景图像和 javascript 显示伪像

Question

嗨！有人可以回答我的问题吗？我在 CSS + Javascript 中开发了一个简单的雾效果。它在 Firefox、Opera 和 Chrome 上运行良好。该问题仅存在于 IE 和 Edge 上。该效果使用 JS 在桌面（div 标签）上移动两个背景图像。 Microsoft 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 显示伪像

Background-images and javascript show artifacts

html

javascript

css

internet-explorer

microsoft-edge