CSS 图像精灵怎么用(css sprites定位技术）

原创
|
浏览：14251
|
更新：2017-03-17 13:17

我们在做前端页面的时候，网页中通常包含有很多小图标，这就用到了css sprites技术。把所有小图标放到一张图上，这样可以减少对服务器的请求次数。提高我们的访问速度。CSS 图像精灵的优缺点是什么？CSS 图像精灵怎么用？下面我们依次对这些问题来解答。

工具/原料

photoshop
sublime
电脑

方法/步骤

1
问题一：CSS 图像精灵怎么用
首页我们需要对我们的项目充分的熟悉了解。整体的项目中大概都包含哪些图标，怎么分类，这样才能拼出有便于后期维护的图像。然后打开ps软件，新建画布，我这里建的画布大小为300X150，在具体项目中大家可以根据实际情况来决定建立的画布大小。
2
打开我们的项目文件。如果公司前端和设计分的比较清楚的话，前端只需要让设计提供出需要的icon图标即可。我们也可以根据设计提供的稿子，来完成自己切出来图标。如图所示，在ps中先拉出参考线，然后选择切片工具，对我们需要的图标完成切片。
3
完成切片后选择存储为web所用格式。确定后选择所有用户切片（选择这个选项可以导出我们切的图标，其余不相干的图都不会导出哦。）
4
这就是我们切好导出的图标了，我改了改图标的名字。
5
根据自己图标的多少和大小大致估算出自己建立的画布大小。如图所示，把图标放到新建的画布里面，并且有序的排列好。
6
接下来我们就可以在页面中使用这些图标了。如下图所示是我做出来的代码和在浏览器中的效果
6
相关内容未经许可获取自百度经验
7
图标的位置是怎么快速准确的找到的？这里的位置以左上角开始，x轴，y轴的值均为负值。用切片选择工具选择图标，右键点击，选择编辑切片选项，看到的x，y值即为图标的位置。（需要加上负值哦）
END