背景图像和 javascript 显示工件答案

【问题标题】：Background-images and javascript show artifacts背景图像和 javascript 显示工件
【发布时间】：2017-01-17 14:31:08
【问题描述】：

嗨！有人可以回答我的问题吗？我用 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);
}

有解决办法吗，是我的错误吗？

【问题讨论】：

检查您对background-position-x 位置的计算：这些值只是在增长，而不是上下循环，您似乎正在尝试这样做？（这是在边缘）。还有为什么你将两个值传递给background-position-x 和background-position-y，这对我来说没有多大意义。
@sweaver2112 感谢您对帖子发表评论。我的想法是浏览器应该默认循环，即使值不断增长。我在一个 div 标记内呈现了两个背景图像（同一个文件），它可以工作。

标签： javascript html css internet-explorer microsoft-edge

【解决方案1】：

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

从本质上讲，您的像素看起来是部分透明的，而 MS 需要其中的每个像素都是颜色或透明的（不是部分透明的彩色像素）。

尝试生成另一个 8 位文件，或使用“索引”选项 - 这是一个有用的页面，说明如何：https://meta.wikimedia.org/wiki/Fixing_transparent_PNGs

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

【讨论】：

我非常感谢您的回答。我会检查的。
我做了一些测试。索引 PNG 也有工件，它们是相似的。可能你是对的，因为 JPG 流动正确（我的第二次测试，没有 alpha 通道）。它看起来很像一个错误，而不是缺乏支持。也许微软的专家也会写几句话。非常感谢