1

我知道 css sprites.. 现在我想要一些 css sprites 的例子......

  • 你是如何设法让 css sprites 工作的？
4

6 回答 6

2

我通常使用 CSS 背景属性。此属性允许您设置 top 和 left 的滚动参数，如下例所示。因此，想法是创建一个具有所有状态的图像，并根据事件（如悬停）或其他自定义事件（在这些事件中更改元素 CSS）简单地定位它。我希望这有帮助。

.mySprite a
{
    background: transparent url(/images/spriteButton.gif) no-repeat scroll 0 0
}

.mySprite a:hover
{
    background: transparent url(/images/spriteButton.gif) no-repeat scroll 30 0
}
于 2010-01-27T06:17:44.973 回答
1

如果您使用的是 Firefox，这里有一个简单的方法来了解精灵是什么。转到 yahoo.com，右键单击并查看页面信息，单击媒体。查找其中包含“sprite”的文件名。

这是链接之一： http: //d.yimg.com/a/i/ww/met/gsprite_071309.gif

您将看到许多背景渐变图像。你可以用这个文件来玩。现在您必须根据要使用的背景调整 CSS 中的背景位置，如下所示：

background-image: url('http://d.yimg.com/a/i/ww/met/gsprite_071309.gif') left -30px repeat-x;

这应该让您了解如何管理精灵。

于 2010-01-27T06:18:39.027 回答
1

如果您正在寻找创建 CSS sprite - 您可以查看网站 spriteme.org，它非常酷，向您展示了如何轻松创建 CSS sprite。

对于一个很好的例子，你可以查看这个页面：

http://www.programmerinterview.com/index.php/general-miscellaneous/css-sprite-example-and-tutorial/

给出了很好的解释，并展示了网站所有者如何使用精灵。

于 2013-04-17T21:21:51.897 回答
0

我将它们用于按钮图像。我将图像的上半部分用于正常按钮状态，将下半部分用于鼠标悬停状态。这样，当页面加载时鼠标悬停在图像上就会被加载，并且没有延迟，看起来很糟糕而且很慢。CSS 代码在这里。

于 2010-01-27T06:17:44.623 回答
0

看看这个页面：

http://www.tutorialrepublic.com/css-tutorial/css-sprites.php

它有一个很棒的交互式示例以及您需要了解的有关 CSS Sprite 的所有信息。

于 2013-05-17T07:20:50.593 回答