IE8中的一些圖像閃爍

我已經隔離了這些div圖像交換的代碼。無論位置如何，第二張圖像都會閃爍。我無法弄清楚？圖像與菜單圖像懸停狀態基本相同。我的IE8代碼有問題嗎？IE8中的一些圖像閃爍

<div class="home">&nbsp;</div> 
<div class="image2">&nbsp;</div>

這裏是CSS：

.home{ 
    background-image: url('home.png'); 
    background-repeat:no-repeat; 
} 
.home:hover { 
    background-image: url('home_hover.png'); 
    background-repeat:no-repeat; 
} 
.image2{ 
    background-image: url('image2.png'); 
    background-repeat:no-repeat; 
} 
.image2:hover { 
    background-image: url('image2_hover.png'); 
    background-repeat:no-repeat; 
}

第一圖像不閃爍。 CSS是相同的，我可以重新定位DIV並獲得相同的結果。爲什麼圖像閃爍？這似乎並不重要，如果我把它的高度或寬度屬性。

來源

2014-11-24 user2366911

給你的DIV固定的尺寸，以像素爲單位。 – 2014-11-24 20:27:43

是的，它們已經變暗，我只是排除它，因爲它並不重要。 – user2366911 2014-11-24 21:04:00

嘗試壓縮圖像，看看閃爍是否仍然是一個問題。可以說你的'image2.png'是2mb，使用油漆或任何其他照片編輯應用程序來壓縮它（用油漆打開並保存，如果圖像太大，可以縮放）。

此問題在其他瀏覽器中是否存在？
更新您的瀏覽器不是一個選項嗎？

來源

2014-11-24 20:30:53 ProgrammingPotato

圖片大小約5.5KB。由於我在做企業開發，所以我無法檢查其他瀏覽器。 :(更糟糕的是，我必須在PowerPoint中創建效果並保存爲圖像，這不會讓您的尺寸等選項。我認爲它必須做的與圖像不像我試圖相同的大小如果你用CSS調整圖像大小，但看起來不起作用，我只是爲了解決這個問題而在PowerPoint中重新調整大小， – user2366911 2014-11-24 20:54:52

這是你的問題，Powerpoint搞砸了 – ProgrammingPotato 2014-11-24 22:42:39

閃爍是因爲您使用不同的圖像作爲懸停效果。最初加載頁面時，將加載home.png和image2.png，而不是您的懸停圖像。只有當您第一次懸停要應用的元素時，纔會加載您的懸停式圖像home_hover.png和image2_hover.png。這意味着，當你懸停一個請求時，服務器會爲該背景圖像發出請求。這需要幾個短暫的時間，但足夠長的時間來創建閃爍。

我會建議將每個圖像的默認狀態和懸停狀態組合成單個圖像。如果您的圖片大小爲100像素x 50像素，那麼您的組合圖像將爲100像素x 100像素。將默認狀態放在圖像文件的頂部，懸停在底部。

然後，您的下一步就是設置具有翻轉的元素的尺寸。 CSS會是這樣的：

.home { 
    background-image: url(home.png); 
    background-position: 0 0; 
    display: block; 
    width: 100px; 
    height: 50p;x 
} 
.home:hover { 
    background-position: 0 -50px; 
}

這裏發生了什麼是你正在創建一個窗口100px乘50px的大小。該尺寸與圖像文件的上半部分相匹配，這是默認狀態。圖片的額外50像素仍保持隱藏狀態。

使用background position允許我們相對於元素移動圖像。我們使用-50px將圖像向上移動，從而顯示圖像的下半部分，即懸停狀態。

注意：您也不需要爲您的DIV使用 。

來源

2014-11-24 21:19:01 hungerstar

這似乎是最好的工作 – user2366911 2014-11-24 21:28:19

如果這對你有效標記爲接受的答案，否則請提供一些反饋意見，以便我可以改進答案。 – hungerstar 2014-11-24 22:34:35

我不能投票，因爲我沒有聲望。 – user2366911 2014-11-25 17:22:25

IE8中的一些圖像閃爍

回答

相關問題