Html 背景图案上的悬停效果重复

我有一个背景重复属性设置的模式图像，因此图像在div的X和Y轴上重复

现在我想在用户浏览div时更改背景图像

使用全尺寸背景会很简单，因为我将在精灵中转换它，然后使用css和：hover移动背景

但是，如果图像是重复的X和Y，它是不可能创造一个精灵；正确的？ 还是有什么诡计可以做到这一点？ 因为通过css直接更改图像不好看，因为需要加载悬停图像，并且用户在div中可能会有1-2秒的时间看不到任何背景

谢谢

刚刚 或 使用具有两种不同背景的两个嵌套元素。

---

在mouseover上-为嵌套元素制作透明背景。

你能提供一个js提琴或其他东西吗？你试过两个维度相同但背景和z索引不同的div吗？@squaleLis我不能使用两个div，因为这个div中有内容，我不想有两个内容相同的元素，这是一个浪费带宽加载两倍相同thing@GOB不抱歉，我没有jsfiddle@Cappec如果你玩：before/：after？因此，您可以将它们设置为您的背景，并将它们的z索引更改为完美！这是我一直在寻找的，技术#2（将悬停背景放在另一个元素-9999px-9999px中，以便浏览器加载它）是一个很好的技巧：）谢谢！