Question

我正在尝试使用精灵图片我有一个非常基本的链接

<td align="center">
    <img alt="my alt text" src="/Assets/t/myImage.gif" />
</td>

我挣扎了一段时间，想要改变它并让它在我的精灵中使用一个图像而不是src

Answer 1

这是一个使用精灵图像的简单示例。

基本思想是在固定大小的元素上使用背景图像（在示例中，它是宽度/高度为20px的a标记）。然后使用background-position定位图像以选择所需的精灵。当鼠标悬停时，:hover选择器用于选择另一个精灵。通常情况下，你有多个链接都使用一个图像中的不同精灵。

的CSS：

a.sprite_button
{
    background-image:url(toolbar.png);
    width:20px;
    height:20px;
    display:inline-block;
}
a#button1         { background-position:0px 0px; }
a#button1:hover   { background-position:0px 20px; }

HTML：

<a href="blah" class="sprite_button" id="button1"></a>

Answer 2

sprite是包含多个图形的大图像，在CSS中用作背景图像。它们作为块元素的背景放置，块元素也使用宽度和高度使用CSS进行大小调整。然后，使用背景位置，将背景图像放置在应有的位置。根据这些坐标和元素大小裁剪图像，其余部分将被忽略（用于其他元素背景）。

例如，你有漂亮的按钮，它们具有正常状态，鼠标悬停状态和活动状态（按下）。只需将所有3张图像一张放在另一张图像文件中即可。

button  {display: block; width: 100px; height: 50px; background-image: url(yourImage.png); background-repeat: no-repeat; background-position: 0 0;}
button:HOVER {background-position: 0 -50px;}
button.active {background-position: 0 -100px;}

这也将消除在状态改变时必须加载新背景图像的情况，同时留下一个丑陋的按钮半秒。

如何使用Sprite而不是img src

2 个答案: