CSS Sprite 雪碧图，简单来说就是：
为了提高网页的性能，减少加载次数，将一些不会经常随网站内容变化的小图标，集中放在一张大图上，将该图应作为background-image 嵌入页面中，在需要相关图标时，根据background-position设置坐标值，达到目的。
一个例子，可以复制然后看一下效果：
HTML代码：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>sprite</title>
<link rel="stylesheet" href="css-sprite.css">
</head>
<body>
<div class="container">
<ul class="menu">
<li class="cat-1">
<i></i>
<h3><a href="#">项目一</a></h3>
</li>
<li class="cat-2">
<i > </i>
<h3><a href="#">项目二</a></h3>
</li>
<li class="cat-3">
<i></i>
<h3><a href="#">项目三</a></h3>
</li>
<li class="cat-4">
<i></i>
<h3><a href="#">项目四</a></h3>
</li>
<li class="cat-5">
<i></i>
<h3><a href="#">项目五</a></h3>
</li>
<li class="cat-6">
<i></i>
<h3><a href="#">项目六</a></h3>
</li>
<li class="cat-7">
<i></i>
<h3><a href="#">项目七</a></h3>
</li>
<li class="cat-8">
<i></i>
<h3><a href="#">项目八</a></h3>
</li>
<li class="cat-9">
<i></i>
<h3><a href="#">项目九</a></h3>
</li>
<li class="cat-10" >
<i></i>
<h3><a href="#">项目十</a></h3>
</li>
</ul>
</div>
</body>
</html>
CSS代码：
/*
通用设置
*/
.container, .menu {
margin:0;
padding:0;
line-height: 0;
}
a:link, a:visited {
text-decoration: none;
color: inherit;
}
a:hover {
color: orangered;
}
/*
格式设置
*/
.menu {
width: 120px;
list-style-type: none;
border: 1px solid #ccc;
}
.menu li {
display: block;
height: 31px;
line-height: 31px;
}
li h3 {
font-size: 14px;
font-weight: 400;
border-bottom: 1px solid #eee;
}
li i {
background: url("img/sprite.png");
display: inline-block;
float: left;
width: 24px;
height: 24px;
margin: 0 15px 5px;
}
.cat-1 i{
background-position: 0 0;
}
.cat-2 i {
background-position: 0 -26px;
}
.cat-3 i{
background-position: 0 -52px;
}
.cat-4 i {
background-position: 0 -78px;
}
.cat-5 i{
background-position: 0 -104px;
}
.cat-6 i {
background-position: 0 -130px;
}
.cat-7 i{
background-position: 0 -156px;
}
.cat-8 i {
background-position: 0 -182px;
}
.cat-9 i{
background-position: 0 -208px;
}
.cat-10 i {
background-position: 0 -236px;
}
这是利用一个雪碧图在线制作工具制作的图，工具链接：http://lazytools.sinaapp.com/。 其他工具不清楚，但是该工具最后会生成图标对应的位置CSS信息，可直接使用，很方便。
以下是最终效果图：
总结：对于新手而言，学习一个新知识点，应该多练习，自己写代码，光看光听是不起作用的，看视频的时候觉得都会，实际操作时会出各种问题，多练习也是不断进步的最佳途径。
不知道你是否懂得如何制作和运用雪碧图，反正现在我是会了，呵呵。
时间： 2024-10-10 12:16:28