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，右键单击“查看页面信息”，单击“媒体”。查找其中包含“精灵”的文件名。

这是其中一个链接： 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 code is here.

Answer 6

查看此页面：

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

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

有关css sprites的任何例子吗？

6 个答案: