css精灵图怎么定位

什么是CSS精灵图

CSS精灵图是将多个图片合并为一个文件，通过CSS来控制每个图片在页面中的显示位置和大小，从而减少HTTP请求的次数，提高网站的性能。

例如，我们需要在页面中显示多个小图标，如果每个图标都要发送一次HTTP请求，那么页面的加载速度就会变慢。而如果将所有小图标合并为一个文件，只发送一次HTTP请求，再通过CSS定位控制每个图标的显示位置和大小，就可以提高网站的性能。

如何创建CSS精灵图

步骤一：准备多个小图片

首先需要准备多个小图片，例如下面这几个图标：

.icon-home {
  width: 20px;
  height: 20px;
  background-image: url('home.png');
}
.icon-user {
  width: 20px;
  height: 20px;
  background-image: url('user.png');
}
.icon-edit {
  width: 20px;
  height: 20px;
  background-image: url('edit.png');
}

步骤二：合并小图片为一个文件

使用工具将多个小图片合并为一个文件，例如使用SpriteGen网站的服务。合并后的文件如下：

可以看到，多个小图片已经合并为一个大图片。

步骤三：设置CSS样式

使用CSS样式来定位每个小图片在页面中的位置和大小。首先需要设置整个精灵图的大小：

.sprite {
  width: 60px;
  height: 60px;
  background-image: url('sprite.png');
}

然后分别设置每个小图片在精灵图中的位置和大小：

.icon-home {
  width: 20px;
  height: 20px;
  background-position: 0 0;
}
.icon-user {
  width: 20px;
  height: 20px;
  background-position: -20px 0;
}
.icon-edit {
  width: 20px;
  height: 20px;
  background-position: -40px 0;
}

可以看到，使用background-position属性来设置每个小图片在精灵图中的位置。

如何使用CSS精灵图

使用CSS精灵图需要先引入精灵图的CSS文件，在需要使用图片的地方将对应的CSS类名设置为元素的类名即可。

<link rel="stylesheet" href="sprite.css">
<!-- 显示home图标 -->
<span class="icon-home"></span>
<!-- 显示user图标 -->
<span class="icon-user"></span>
<!-- 显示edit图标 -->
<span class="icon-edit"></span>

通过设置元素的类名为对应的CSS类名，实现了在页面中显示精灵图中的小图片。

总结

CSS精灵图是一种优化网站性能的方法，通过将多个小图片合并为一个文件，并通过CSS来控制每个小图片在页面中的显示位置和大小，从而减少HTTP请求的次数，提高网站的性能。创建CSS精灵图需要先准备多个小图片，然后将它们合并为一个文件，最后设置CSS样式来定位每个小图片在精灵图中的位置和大小。使用CSS精灵图需要引入精灵图的CSS文件，并将对应的CSS类名设置为元素的类名即可。