css雪碧（css精灵）css精灵（css雪碧）将一排图片作为背景图，只取其中一张为显示效果background:url

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style type="text/css">
			/* .img{background:url(img.png)  no-repeat;}
			.enroll{height:256px;width:256px;background-position:0 0;}
			.home{height:256px;width:256px;background-position:-256px 0;}
			.qna{height:256px;width:256px;background-position:-512px 0;}
			.appointment{height:256px;width:256px;background-position:-768px 0;}
			.bus{height:256px;width:256px;background-position:-1024px 0;}
			.class{height:256px;width:256px;background-position:-1280px 0;} */
			body{
				background-color: #000;
			}
			li{
				width: 256px;
				height: 256px;
				list-style: none;
				margin-left: 20px;
				float: left;
			}
			.a{
				background:url(img.png)  no-repeat;
				background-position:0 0;
			}
			.a:hover{
				background:url(img.png)  no-repeat;
				background-position:-256px 0;
			}
			.b{
				background:url(img.png)  no-repeat;
				background-position:-512px 0;
			}
			.b:hover{
				background:url(img.png)  no-repeat;
				background-position:-768px 0
			}
			.c{
				background:url(img.png)  no-repeat;
				background-position:-1024px 0;
			}
			.c:hover{
				background:url(img.png)  no-repeat;
				background-position:-1280px 0;
			}
		</style>
	</head>
	<body>
		<ul>
			<li class="a"><a href="#"></a></li>
			<li class="b"><a href="#"></a></li>
			<li class="c"><a href="#"></a></li>
		</ul>
	</body>
</html>