0

我在 webtutorial 的某个地方读到过，我们只能使用单个图像来实现 CSS 中的悬停效果。例如。我只需要在 CSS 中输入这张图片

CSS 图像

因此，当 Facebook 图标未悬停时，我们会看到暗灰色图标，但是当有人将鼠标悬停在图标上时，会显示蓝色图标，为此我只需要在 CSS 中使用一个图像文件。

我们怎么能这样做。另外，我想知道这些图像是什么？

4

3 回答 3

2

它们被称为精灵

它们允许您将一个图像用于多个元素，这些元素看起来可能完全不同

官方文档

我做了一个简单的例子来做你在这里需要的

<div></div>

div {
  background: url('http://i45.tinypic.com/2jee9zo.png');
  background-position: -10px -15px;
  height: 70px;
  width: 70px;
}

div:hover {
  background-position: -10px 83px;
}
于 2012-11-27T14:08:04.057 回答
0

您可以使用 CSS 精灵。这是一个有用的工具：http ://es.spritegen.website-performance.org/

进一步阅读：http ://www.w3schools.com/css/css_image_sprites.asp

于 2012-11-27T14:02:35.657 回答
0

编辑：它被称为精灵（抱歉添加了这个，因为我忘了回答你的第一个问题是如何命名的）

您可以通过定位背景图像来做到这一点，如下面我的工作示例

这是CSS，顺便说一句

input#searchSubmit          { height: 34px; width: 36px; background: url('../images/searchSubmit.png') no-repeat; margin: 8px 8px 0 4px; cursor: pointer; border: none; }
input#searchSubmit:hover    { background-position: 0px -34px; }

如您所见，当我将鼠标悬停在 searchSubmit 上时，它将更改粘贴在按钮上的图像的背景位置，而不是显示黑色和红色的搜索图标，而是红色和白色的搜索图标。

网站在这里，所以你可以看到它的实际效果，顺便说一句，我所有的操作按钮都是这样制作的。 单击此处查看实际操作

于 2012-11-27T14:07:57.053 回答