CSS 图像精灵 详解
css3基础 2022-05-23 12:05:20小码哥的IT人生shichen
CSS 图像精灵
图像精灵
图像精灵是单个图像中包含的图像集合。
包含许多图像的网页可能需要很长时间才能加载，同时会生成多个服务器请求。
使用图像精灵将减少服务器请求的数量并节约带宽。
图像精灵 - 简单的例子
我们使用以下单幅图像（"navsprites.gif"）而不是使用三幅单独的图像：
通过使用 CSS，我们可以仅显示所需图像的某个部分。
在下面的例子中，CSS 指定了显示 "navsprites.gif" 图像的哪部分：
示例代码：
#home {
width: 46px;
height: 44px;
background: url(navsprites.gif) 0 0;
}
完整实例【亲自试一试】：
<!DOCTYPE html>
<html>
<head>
<style>
#home {
width: 46px;
height: 44px;
background: url(/i/css/navsprites.gif) 0 0;
}
#next {
width: 43px;
height: 44px;
background: url(/i/css/navsprites.gif) -91px 0;
}
</style>
</head>
<body>
<img id="home" src="/i/css/trans.gif" width="1" height="1">
<img id="next" src="/i/css/trans.gif" width="1" height="1">
</body>
</html>
可以使用本站在线JavaScript测试工具测试上述代码运行效果：http://www.phpcodeweb.com/runjs.html
例子解释：
<img id="home" src="trans.gif">- 仅定义小的透明图像，因为 src 属性不能为空。而实际显示的图像将是我们在 CSS 中指定的背景图像。width: 46px; height: 44px;- 定义我们要使用的图像部分background: url(navsprites.gif) 0 0;- 定义背景图片及其位置（left 0px, top 0px）
图像精灵 - 创建导航列表
我们希望使用精灵图片（"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;
background: url('img_navsprites.gif') 0 0;
}
#prev {
left: 63px;
width: 43px;
background: url('img_navsprites.gif') -47px 0;
}
#next {
left: 129px;
width: 43px;
background: url('img_navsprites.gif') -91px 0;
}
完整实例【亲自试一试】：
<!DOCTYPE html>
<html>
<head>
<style>
#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: 43px;
background: url('/i/css/navsprites.gif') 0 0;
}
#prev {
left: 63px;
width: 42px;
background: url('/i/css/navsprites.gif') -47px 0;
}
#next {
left: 129px;
width: 42px;
background: url('/i/css/navsprites.gif') -91px 0;
}
</style>
</head>
<body>
<ul id="navlist">
<li id="home"><a href="http://www.phpcodeweb.com/news/741.html"></a></li>
<li id="prev"><a href="http://www.phpcodeweb.com/news/742.html"></a></li>
<li id="next"><a href="http://www.phpcodeweb.com/news/743.html"></a></li>
</ul>
</body>
</html>
可以使用本站在线JavaScript测试工具测试上述代码运行效果：http://www.phpcodeweb.com/runjs.html
例子解释：
- #navlist {position:relative;} - 位置设置为相对，以允许在其中进行绝对定位
- #navlist li {margin:0;padding:0;list-style:none;position:absolute;top:0;} - 外边距和内边距设置为 0，删除 list-style，并且所有列表项都均为绝对定位
- #navlist li, #navlist a {height:44px;display:block;} - 所有图片的高度均为 44px
现在开始为每个特定部分设置定位和样式：
- #home {left:0px;width:46px;} - 一直向左定位，图像宽度 46px
- #home {background:url(navsprites.gif) 0 0;} - 定义背景图片及其位置（left 0px, top 0px）
- #prev {left:63px;width:43px;} - 向右定位 63px（#home 宽度 46px + 项目之间的一些额外空间），宽度 43px。
- #prev {background:url('navsprites.gif') -47px 0;} - 定义背景图片向右 47px（#home 宽度 46px + 1px 分隔线）
- #next {left:129px;width:43px;} - 向右定位 129px（#prev 开始是 63px + #prev 的宽度是 43px + 多余的空格），宽度 43px。
- #next {background:url('navsprites.gif') -91px 0;} - 定义背景图片向右 91px（#home 宽度 46px + 1px 分隔线+ #prev 宽度 43px + 1px 分隔线）
图像精灵 - 悬停效果
现在，我们要向导航列表中添加悬停效果。
提示：:hover 选择器可用于所有元素，而不仅限于链接。
我们的新图像（"navsprites_hover.gif"）包含三幅导航图像和三幅用于悬停效果的图像：
因为这是一幅图像，而不是六个单独的文件，所以当用户将鼠标悬停在图像上时，不会有加载延迟。
我们仅添加三行代码来实现悬停效果：
示例代码：
#home a:hover {
background: url('navsprites_hover.gif') 0 -45px;
}
#prev a:hover {
background: url('navsprites_hover.gif') -47px -45px;
}
#next a:hover {
background: url('navsprites_hover.gif') -91px -45px;
}
完整实例【亲自试一试】：
<!DOCTYPE html>
<html>
<head>
<style>
#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: 43px;
background: url('/i/css/navsprites_hover.gif') 0 0;
}
#prev {
left: 63px;
width: 42px;
background: url('/i/css/navsprites_hover.gif') -47px 0;
}
#next {
left: 129px;
width: 42px;
background: url('/i/css/navsprites_hover.gif') -91px 0;
}
#home a:hover {
background: url('/i/css/navsprites_hover.gif') 0 -45px;
}
#prev a:hover {
background: url('/i/css/navsprites_hover.gif') -47px -45px;
}
#next a:hover {
background: url('/i/css/navsprites_hover.gif') -91px -45px;
}
</style>
</head>
<body>
<ul id="navlist">
<li id="home"><a href="http://www.phpcodeweb.com/news/741.html"></a></li>
<li id="prev"><a href="http://www.phpcodeweb.com/news/742.html"></a></li>
<li id="next"><a href="http://www.phpcodeweb.com/news/743.html"></a></li>
</ul>
</body>
</html>
可以使用本站在线JavaScript测试工具测试上述代码运行效果：http://www.phpcodeweb.com/runjs.html
例子解释：
#home a:hover {background: transparent url('img_navsprites_hover.gif') 0 -45px;} - 我们为所有三个悬停图像指定相同的背景位置，仅向下 45 像素
