Question

我正在尝试用CSS交换图像但是当鼠标第一次翻转时，而不是一个图像被另一个图像替换，我首先得到一个闪烁。这是我的CSS代码：

#UL {
    width: 50px;
    height: 54px;
    background:url("/img/UL_gr.png") no-repeat;     
}
#UL:hover {
    background-image:url("/i/logos/UL.png");        
}

Answer 1

预加载图像并使用精灵。问题解决了！

Answer 2

闪烁可能是因为浏览器试图加载新图像（UL.png？）

只是看看，尝试添加一个带有“/i/logos/UL.png”的img元素作为src，并将display：none作为内联样式。将其添加到您网页的某个位置，看看是否有帮助。

Answer 3

闪烁是因为图像尚未加载，您应该预加载它。有很多方法可以做到这一点，下面是一种方法。它不会显示在页面中，但由于它在正文中，它仍然会加载图像。将其放在所有其他内容之下，这样就不会减慢其他任何内容的加载速度。

<div style="display:none;">
   <img src="/i/logos/UL.png" >
</div>

Answer 4

原因很可能是浏览器尚未加载图像。您可以按this page。

中所述进行预加载

使用CSS进行图像交换 - 闪烁问题

4 个答案: