1

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

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

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

4

2 回答 2

0

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

基本思想是在固定大小的元素上使用背景图像（在示例中，它是一个a宽度/高度为 20 像素的标签）。然后使用定位图像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>
于 2010-09-10T12:12:20.007 回答
0

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

例如，您有漂亮的按钮，它们具有正常状态、鼠标悬停状态和活动状态（按下）。只需将所有 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;}

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

于 2010-09-10T12:15:45.910 回答