CSS 图像精灵怎么用(css sprites定位技术)
我们在做前端页面的时候,网页中通常包含有很多小图标,这就用到了css sprites技术。把所有小图标放到一张图上,这样可以减少对服务器的请求次数。提高我们的访问速度。CSS 图像精灵的优缺点是什么?CSS 图像精灵怎么用?下面我们依次对这些问题来解答。
操作方法
- 01
问题一:CSS 图像精灵怎么用 首页我们需要对我们的项目充分的熟悉了解。整体的项目中大概都包含哪些图标,怎么分类,这样才能拼出有便于后期维护的图像。然后打开ps软件,新建画布,我这里建的画布大小为300X150,在具体项目中大家可以根据实际情况来决定建立的画布大小。
- 02
打开我们的项目文件。如果公司前端和设计分的比较清楚的话,前端只需要让设计提供出需要的icon图标即可。我们也可以根据设计提供的稿子,来完成自己切出来图标。如图所示,在ps中先拉出参考线,然后选择切片工具,对我们需要的图标完成切片。
- 03
完成切片后选择存储为web所用格式。确定后选择所有用户切片(选择这个选项可以导出我们切的图标,其余不相干的图都不会导出哦。)
- 04
这就是我们切好导出的图标了,我改了改图标的名字。
- 05
根据自己图标的多少和大小大致估算出自己建立的画布大小。如图所示,把图标放到新建的画布里面,并且有序的排列好。
- 06
接下来我们就可以在页面中使用这些图标了。如下图所示是我做出来的代码和在浏览器中的效果
- 07
图标的位置是怎么快速准确的找到的?这里的位置以左上角开始,x轴,y轴的值均为负值。用切片选择工具选择图标,右键点击,选择编辑切片选项,看到的x,y值即为图标的位置。(需要加上负值哦)
赞 (0)