css sprites技术将多个背景集成到一个png图片上css定位

CSS Sprites是将多个小图标或小背景图组合成一个大的图像文件，然后使用CSS background进行定位显示的技术，它可以减少网页中图片的http请求次数，提高网站的加载速度，提升用户体验。下面是CSS Sprites的完整攻略：

步骤一：准备小图标或小背景图

首先，准备多个小背景图或小图标，大小最好控制在30x30像素以内。比如我们将准备三个Twitter、Facebook和Linkedin的小图标，假设它们的大小都是26x26像素。

步骤二：将小图标合成一张png图片

接下来，使用Photoshop等图片编辑软件，将准备好的小图标按照一定的规则排列在一起，可以水平排版，也可以垂直排版。最好保证小图标之间有一定的间距。制作好的图片文件为sprites.png，大小为81x26像素。

步骤三：定义CSS样式

为了实现CSS Sprites技术，我们需要使用以下CSS样式来对背景图片进行定位显示：

.icon-twitter {
  width: 26px;
  height: 26px;
  background-image: url(sprites.png);
  background-position: 0 0;
}

.icon-facebook {
  width: 26px;
  height: 26px;
  background-image: url(sprites.png);
  background-position: -26px 0;
}

.icon-linkedin {
  width: 26px;
  height: 26px;
  background-image: url(sprites.png);
  background-position: -52px 0;
}

在这段代码中，我们定义了三个类，分别对应三个小图标。它们都有相同的大小，并且使用了同一个图片文件sprites.png作为背景图片。通过background-position属性来控制小图标的显示位置。

步骤四：在HTML中使用CSS样式

最后，在HTML中使用定义好的CSS样式来显示小图标：

<ul>
  <li><a href="#" class="icon-twitter">Twitter</a></li>
  <li><a href="#" class="icon-facebook">Facebook</a></li>
  <li><a href="#" class="icon-linkedin">Linkedin</a></li>
</ul>

这里我们将这三个小图标放在一个无序列表中。每个列表项中包含一个链接和一个类名，该类名对应定义好的CSS样式。当页面渲染时，会自动使用CSS Sprites技术将背景图片的不同位置显示到相应的元素上。

示例说明

下面给出两个示例说明：

示例一：导航菜单

比如我们要制作一个导航菜单，每个菜单项都有相应的图标。如果每个菜单项都使用一张背景图片，那么页面加载时需要加载多个背景图片，会影响网站的加载速度。如果使用CSS Sprites技术，可以将多个背景图合成一张大图，以减少网页加载过程中的http请求次数。

示例二：星级评分

比如我们要制作一个星级评分的功能，需要用五个星星对不同的分数进行展示。如果每个星星都使用一张背景图，那么会加载很多张小背景图，从而影响网站的加载速度。如果使用CSS Sprites技术，可以将五个小图标合成一张大图，以减少网页加载过程中的http请求次数。