图像精灵(Image Sprites)
图像精灵是放入一张单独的图片中的一系列图像。
包含大量图像的网页需要更长时间来下载,同时会生成多个服务器请求。
使用图像精灵将减少服务器请求数量并节约带宽。
图像精灵 - 简单的例子
我们使用这幅单独的图像 ("img_navsprites.gif"),而不是三幅独立的图像:
通过 CSS,能够只显示我们需要的图像部分。
在下面的例子中,CSS 规定要显示 "img_navsprites.gif" 图像的哪个部分:
实例
img.home { width:46px; height:44px; background:url(img_navsprites.gif) 0 0; }
例子解释:
因为 src 属性不能为空,所有我们定义了一幅小的透明图像。而显示的图像将是我们在 CSS 中规定的背景图像:
<img class="home" src="img_trans.gif" />
定义我们希望使用的图像部分:
width: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;width:46px;} #home {background:url('img_navsprites.gif') 0 0;} #prev {left:63px;width:43px;} #prev {background:url('img_navsprites.gif') -47px 0;} #next {left:129px;width: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;width:46px;}
定义背景图像及其位置 (left 0px, top 0px):
#home {background:url(img_navsprites.gif) 0 0;}
向右定位 63px (#home 宽度 46px + 项目之间的间隔),宽度是 43px:
#prev {left:63px;width:43px;}
定义背景图像向右移动 47px (#home 的宽度是 46px + 1px 的分隔线):
#prev {background:url('img_navsprites.gif') -47px 0;}
向右定位至 129px (从 #prev 的 63px 开始 + #prev 宽度 43px + extra space),宽度是 43px:
#next {left:129px;width: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;}