Question

我记得在某个地方（很久以前）读过那些精灵 - 或者至少我认为这就是他们所谓的 - 比当你试图在悬停时改变图像时使用两个图像更好。我相信推理与没有延迟有关。例如，有时我会去一个网站然后点击一个链接，一瞬间那里没有图像......它是空白的......在第二个出现之前。是不是因为第二张图片必须先加载？如果是这样，那么“精灵”会不会更好？

现在哪种方式是我想采取的更好的方法。基本上，我有一个表单按钮，我想用图像更改...当我想要它改变时。

我用谷歌搜索，发现像<input type="image" ...>这样的东西会起作用，但是比其他人说的那样，这不是正确的方式yady yady ya。

那我该怎么办呢？精灵或单独的图像？最重要的是，如何我能做到吗？

非常感谢，新手。

Answer 1

是的，精神在性能/带宽方面更好，你应该看看：

另请看：

CSS Sprite Generators

Answer 2

CSS Sprites是要走的路，否则你必须“预加载”你的悬停图像。

我们假设您的按钮宽100像素，高20像素。

创建一个新的100px x 40px图像，将“默认”状态图像置于顶部，将“悬停”状态图像置于底部。

然后在HTML中创建按钮。

<input type="button" class="submit" />

将新图像作为背景应用于按钮元素。

.submit {
    display: inline-block;
    width: 100px;
    height: 20px;
    border: 0;
    background: url(button_bg.gif) no-repeat top;
}

然后只需在悬停状态下更改背景图像的位置。

.submit {
    background-position: bottom;
}

您的悬停图片已经加载，因此不会有任何延迟。

玩得开心！

如何使用图像替换表单按钮，并在悬停时更改图像？精灵与单独的图像？

2 个答案: