Question

我正在使用带有背景图形的<button>元素。我已经将CSS伪造的类:hover应用于它，以便用不同的背景替换背景。我正在预览页面上的其他背景图形。

看一下这个JSFiddle进行精简演示：http://jsfiddle.net/WawV3/2/

在Mac Chrome（32.0.1700.77）和Safari（7.0.1）中，当您第一次将鼠标悬停在按钮上时，背景会闪烁，因为它（可能）会下载新图形...即使是相同的悬停图像在页面下方进一步加载。（它只会在第一次悬停时执行此操作;后续的悬停会立即加载。重新加载页面以便再次查看它。）

是什么给出的？浏览器不应该下载背景图像，因为它已经在页面上以普通视图显示了......对吗？

值得一提的是，在Mac和Windows或IE中，这似乎都不是Firefox的问题。

Answer 1

如果无法使用精灵，您可以对背景图像进行编码以避免此问题。见小提琴......

http://jsfiddle.net/WawV3/5/

button {
    height: 44px;
    width: 106px;
    background-image: url([data:image/png;base64,...]);
    background-repeat: no-repeat;
    border: none;
    outline: none;
}
button:hover {
    background-image: url([data:image/png;base64,...]);
    background-repeat: no-repeat;
}

浏览器下载已加载到页面上的背景图像？

1 个答案: