Question

我已将代码隔离到这些div图像交换。无论位置如何，第二张图像都会闪烁。我弄清楚了吗？图像基本上与菜单图像悬停状态相同。我的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并获得相同的结果。为什么图像会闪烁？如果我将高度或宽度属性设置为它似乎并不重要。

Answer 1

闪烁是由于您为悬停效果使用不同的图像。首次加载您的网页时，系统会加载home.png和image2.png，而不会加载您的悬停图片。只有当您首次悬停应用它们的元素时，才会加载home_hover.png和image2_hover.png的悬停图像。这意味着，当您将请求悬停在服务器上以获取该背景图像时。这需要一些短暂的时间，但足以产生闪烁。

我建议将每个图像的默认状态和悬停状态组合成单个图像。如果您的图像为100px×50px，则组合图像将为100px×100px。将默认状态放在图像文件的顶部，将鼠标悬停在底部。

然后，您的下一步是在具有翻转的元素上设置尺寸。 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的窗口。该维度与图像文件的上半部分匹配，这是默认状态。额外50px的图像仍然隐藏。

使用background position可以让我们相对于元素移动图像。我们使用-50px将图像向上移动，显示图像的下半部分，即你的悬停状态。

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

有些图像在IE8中闪烁

1 个答案: