CSS 图像精灵

图像精灵（Image Sprites）

图像精灵是放入一张单独的图片中的一系列图像。

包含大量图像的网页需要更长时间来下载，同时会生成多个服务器请求。

使用图像精灵将减少服务器请求数量并节约带宽。

图像精灵 - 简单的例子

我们使用这幅单独的图像 ("img_navsprites.gif")，而不是三幅独立的图像：

通过 CSS，能够只显示我们需要的图像部分。

在下面的例子中，CSS 规定要显示 "img_navsprites.gif" 图像的哪个部分：

实例

img.home
{
46px;
height:44px;
background:url(img_navsprites.gif) 0 0;
}

亲自试一试

例子解释：

因为 src 属性不能为空，所有我们定义了一幅小的透明图像。而显示的图像将是我们在 CSS 中规定的背景图像：

<img class="home" src="img_trans.gif" />

定义我们希望使用的图像部分：

46px;
height:44px;

定义背景图像及其位置 (left 0px, top 0px)：

background:url(img_navsprites.gif) 0 0;

这是使用图像精灵的最简单的方法，现在我们希望通过链接和 hover 效果来扩展它。

图像精灵 - 创建导航列表

我们希望使用图像精灵 ("img_navsprites.gif") 来创建导航列表。

我们将使用 HTML 列表，因为它们能够充当列表，同时也支持背景图像：

实例

#navlist {position:relative;}
#navlist li {margin:0;padding:0;list-style:none;position:absolute;top:0;}
#navlist li, #navlist a {height:44px;display:block;}

#home {left:0px;46px;}
#home {background:url('img_navsprites.gif') 0 0;}

#prev {left:63px;43px;}
#prev {background:url('img_navsprites.gif') -47px 0;}

#next {left:129px;43px;}
#next {background:url('img_navsprites.gif') -91px 0;}

亲自试一试

例子解释：

把 position 设置为 relative 允许其中进行绝对定位：

#navlist {position:relative;}

外边距和内边距被设置为 0，去掉 list-style，并且所有列表项均为绝对定位：

#navlist li {margin:0;padding:0;list-style:none;position:absolute;top:0;}

所有图像的高度是 44px：

#navlist li, #navlist a {height:44px;display:block;}

现在开始定位并添加每个具体部分的样式：

定位到最左侧，图像宽度为 46px：

#home {left:0px;46px;}

定义背景图像及其位置 (left 0px, top 0px)：

#home {background:url(img_navsprites.gif) 0 0;}

向右定位 63px (#home 宽度 46px + 项目之间的间隔)，宽度是 43px：

#prev {left:63px;43px;}

定义背景图像向右移动 47px (#home 的宽度是 46px + 1px 的分隔线)：

#prev {background:url('img_navsprites.gif') -47px 0;}

向右定位至 129px (从 #prev 的 63px 开始 + #prev 宽度 43px + extra space)，宽度是 43px：

#next {left:129px;43px;}

定义背景图像向右 91px (#home width 46px + 1px line divider + #prev width 43px + 1px line divider )：

#next {background:url('img_navsprites.gif') no-repeat -91px 0;}

图像精灵 - Hover 效果

现在，我们希望向导航列表添加 hover 效果。

提示：:hover 选择器用于在鼠标指针位于其上时选取元素。

提示：:hover 选择器可用在所有元素上，不仅仅是链接。

我们的新图像 ("img_navsprites_hover.gif") 包含三幅导航图像，以及三幅用于 hover 效果的图像：

由于这是一幅单独的图像，而不是六个独立的文件，当用户将鼠标指针移动到图像上时，不会产生加载延迟。

为了添加 hover 效果，我们只加入了三行代码：

实例

#home a:hover{background: url('img_navsprites_hover.gif') 0 -45px;}
#prev a:hover{background: url('img_navsprites_hover.gif') -47px -45px;}
#next a:hover{background: url('img_navsprites_hover.gif') -91px -45px;}

亲自试一试

例子解释：

对于所有三幅 hover 图像，我们规定了相同的背景位置，只是向下移动 45px：

#home a:hover{background: transparent url(img_navsprites_hover.gif) 0 -45px;}