【CSS 16】image sprites 图像精灵图像精灵导航列表图像精灵悬停效果-Toy模板网

这篇具有很好参考价值的文章主要介绍了【CSS 16】image sprites 图像精灵图像精灵导航列表图像精灵悬停效果。希望对大家有所帮助。如果存在错误或未考虑完全的地方，请大家不吝赐教，您也可以点击"举报违法"按钮提交疑问。

image sprites 图像精灵

图像精灵是单个图像中包含的图像集合
包含许多图像的网页可能需要很长时间才能加载，同时会生成多个服务器请求
使用图像精灵将减少服务器请求的数量并节约带宽

通过使用 CSS，我们可以仅显示所需图像的某个部分
在下面的例子中，CSS 指定了显示 “navsprites.gif” 图像的哪部分

<!-- 
<img id="home" src="trans.gif"> - 仅定义小的透明图像，因为 src 属性不能为空
而实际显示的图像将是我们在 CSS 中指定的背景图像

width: 46px; height: 44px; - 定义我们要使用的图像部分

background: url(navsprites.gif) 0 0; - 定义背景图片及其位置（left 0px, top 0px）
-->
<!DOCTYPE html>
<html>
<head>
<style>
#home {
	width: 45px;
	height: 42px;
	background: url(/i/css/navsprites.gif) -44.5px 0;
}

#next {
	width: 45px;
	height: 42px;
	background: url(/i/css/navsprites.gif) -90px 0;
}

</style>
</head>
<body>

<img id="home" src="/i/css/trans.gif" width="1" height="1">
<br>
<img id="next" src="/i/css/trans.gif" width="1" height="1">

</body>
</html>

通过图像精灵创建导航列表
希望使用精灵图片（“navsprites.gif”）来创建一个导航列表
我们将使用 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 分隔线）
-->
<!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') -91px 0;
}

#next {
	left: 129px;
	width: 42px;
	background: url('/i/css/navsprites.gif') -47px 0;
}
</style>
</head>
<body>

<ul id="navlist">
	<li id="home"><a href="/css/index.asp"></a></li>
	<li id="prev"><a href="/css/css_syntax.asp"></a></li>
	<li id="next"><a href="/css/css_jianjie.asp"></a></li>
</ul>

</body>
</html>

图像精灵的悬停效果
向导航列表中添加悬停效果
:hover 选择器可用于所有元素，而不仅限于链接
我们的新图像（“navsprites_hover.gif”）包含三幅导航图像和三幅用于悬停效果的图像
因为这是一幅图像，而不是六个单独的文件，所以当用户将鼠标悬停在图像上时，不会有加载延迟
在前面的基础上只需要加三行代码即可（当然最好把上面的背景链接统一改为navsprites_hover.gif）文章来源地址https://www.toymoban.com/news/detail-528468.html

/*
#home a:hover {background: transparent url('img_navsprites_hover.gif') 0 -45px;} - 我们为所有三个悬停图像指定相同的背景位置，仅向下 45 像素
*/
#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;
}