有什么关于 css sprites 的例子吗？

Question

我了解 css sprites.. 现在我想要一些 css sprites 的例子....

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

Answer 1

我通常使用 CSS 背景属性。此属性允许您设置顶部和左侧的滚动参数，如下面的示例所示。因此，我们的想法是创建一个具有所有状态的图像，并根据悬停事件或其他更改元素 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
}

Answer 2

http://stylemeltdown.com/2007/10/22 /image-sprite-navigation-with-css/

http://www.w3schools .com/css/css_positioning.asp

http://template.joomlart.com/ja_iris/index.php?option=com_content&view=section&layout=blog&id=4&Itemid=29

Answer 3

如果您使用 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;

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

Answer 4

如果您想创建 CSS 精灵 - 您可以访问 spriteme.org 网站，该网站非常酷，并向您展示了如何轻松创建 CSS 精灵。

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

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

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

Answer 5

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

Answer 6

查看此页面：

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

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