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中的一些图像闪烁

回答

相关问题