背景圖像和javascript顯示文物

嗨！有人可以回答我的問題嗎？我在CSS + Javascript中開發了一個簡單的霧效果。它在Firefox，Opera和Chrome上運行良好。該問題只存在於IE和Edge上。該效果使用JS在桌面（div標籤）上移動兩個背景圖像。微軟網頁瀏覽器會在紋理中顯示奇怪的框。它看起來像一個副作用。這個問題將在目前在網站上找到：背景圖像和javascript顯示文物

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); 
}

是否有它的解決方法，有沒有錯誤我的？

來源

2017-01-16 Włodzimierz O. Kubera

檢查你的計算'background-position-x'的位置：這些值只是增長，而不是上下循環，你似乎在嘗試？（這是邊緣）。你爲什麼要將兩個值傳遞給'background-position-x'和'background-position-y'，這對我來說沒有什麼意義。 – sweaver2112

@ sweaver2112感謝您評論這篇文章。我的想法是瀏覽器應該默認循環，即使價值在不斷增長。我有兩個背景圖像（相同的文件）呈現在一個div標記內，它的工作原理。 –

即使是現代版本的Microsoft瀏覽器也不能支持具有透明度的更復雜的PNG文件，並且它看起來像您的PNG至少是24位或32位，並且不使用Microsoft支持的透明度方法。

本質上，它看起來像是在那裏有部分透明的像素，MS需要在那裏的每個像素是顏色或透明（不是部分透明的彩色像素）。

嘗試製作另一個爲8位文件，或在「索引」選項的工作 - 這是怎樣一個有用的頁面：https://meta.wikimedia.org/wiki/Fixing_transparent_PNGs

你可能真的很難讓你在IE想要的效果或儘管如此，鑑於每個像素可能需要打開或關閉，這取決於霧層，因此您可能更適合檢測IE瀏覽器，並且只需具有靜態背景即可。

來源

2017-01-16 16:29:30 Kit

我非常感謝答案。我會查一下。 –

我做了一些測試。索引的PNG也有僞影，它們是相似的。也許你是對的，因爲JPG正確流動（我的第二個測試，沒有alpha通道）。它看起來像一個錯誤，而不是缺乏支持。也許微軟的專家也會寫幾句話。非常感謝 –

背景圖像和javascript顯示文物

回答

相關問題