Css Firefox：第一次悬停闪烁

我正试图改变鼠标上某个元素的背景图像，它在Chrome上运行得非常好。但在Firefox中，它总是在加载页面后的第一次悬停时闪烁/闪烁一秒钟

我已经预先加载了

body:after

上所需的图像，Firefox中的开发者控制台显示有一个“GET”请求要处理这个文件。然而，它似乎还没有准备好在第一次鼠标悬停时进行渲染

这就是我预加载图像的方式

body:after {
    position: absolute;
    width: 0;
    height: 0;
    overflow: hidden;
    z-index: -1;
    content: url(image.png);
}

---

我不明白，为什么它在Chrome中工作得如此完美，但是Firefox会在第一时间产生闪烁，不管是否预加载。我确实知道图像精灵，但在我的情况下，这是不可能的。

即使它已经从服务器加载，如果看到一些额外的延迟，我会将两个图像（堆叠或并排）放在一个单独的图像也称为精灵表中

然后在悬停时，移动背景位置以显示图像的另一半

body:after {
    position: absolute;
    width: 0;
    height: 0;
    overflow: hidden;
    z-index: -1;
    content: url(image.png);
}

例如，如果每个图像都是50x50，则可以使用两个图像并排制作一个100x50图像。让“正常”状态仅显示左半部分（通过将元素宽度保持为50，背景位置保持为0），然后在悬停状态下向左滑动背景50px，以显示右半部分：

background-position: -50px 0;

---

你能做一个演示吗？请为你的工作代码创建一个代码片段。谢谢，我也不知道我是否愿意预先渲染一幅图像，如果你事先告诉我应该在0 x 0像素的空间内进行预渲染。是的，你说得对。对于这样一个简单的预加载技巧，现代浏览器可能做了太多的“智能决策”。在所有这些之后，不管我在原始帖子中的最后一句话，我都会选择一个图像精灵。同意，使用像这样的“滑动门”技术将更容易，代码更少，在任何地方都可以工作，对图像的HTTP请求更少我不想使用图像精灵的原因是因为我计划稍后添加一个背景转换。如果你用图像精灵来做这件事，看起来真的很奇怪。但我找到了一种不管怎样都能做到的方法（在本文中）：