2017-04-07 85 views
3

我有這個div:股利反覆的背景不會呈現proprely在IE /邊緣

<div id="trees"></div> 

這個CSS格式化:

#trees { 
    width: 100%; 
    position: absolute; 
    top: 37%; 
    height: 40%; 
    background: url("/img/Tree.png") repeat-x; 
    background-size: auto 100%; 
} 

它可以在所有我測試瀏覽器細末,用這樣的結果:

Normal trees

除IE/EDGE,它看起來LIK E本:

樹與顏色毛刺:

最奇怪的是,這個問題不會影響任何其他的div類似配置的背景圖像像火車軌道或山脈...我有一個搜索對此很多,似乎無法在任何地方找到答案。我也嘗試將圖像從PNG轉換爲GIF,並得到了相同的結果。我如何解決這個IE /邊緣兼容性?

這裏是一個codepen再現邊緣的問題:從Irfanview的保存https://codepen.io/darthmooguy/pen/gmNWwg

+0

你能提供一個[mcve]來演示這個問題嗎? –

+0

我在codepen上添加了一個例子! –

+0

我認爲您需要使用Adobe圖像編輯產品從圖像中刪除Adobe XMP元數據。重命名文件不會。你是否創作過這個圖片(https://image.ibb.co/k388T5/Tree.png)?還是來自第三方來源? –

回答

0

我和你有同樣的問題,雖然這不能解決問題的原因,但我發現在圖像邊緣添加透明填充並增加背景大小是一種可用的解決方法。很多情況下。

https://codepen.io/anon/pen/BRwxbR 添加以下縮放我的背景,因此將其設置爲適當的級別。

background-size: auto 250%; 
background-position: center center; 

請忽略顏色變化 - 我也想知道,如果一個特定的顏色觸發,根據您最初的問題,但事實並非如此。

我可能會進一步考慮這一點,因爲我的解決方法並不能真正解決我的問題。 :)

+0

它奇妙地工作,謝謝! –

0

這裏是樹圖像(PNG)(保存透明,無壓縮)...我不知道是否准許IrfanView,剝去雖然Adobe元數據。

enter image description here

,你可以看到...的顏色和透明度顏色是完全不同的從Adobe創作的源泉。