目录使用css的sprites技术2017-04-17什么是css的spritessprites的主要css属性sprites怎么使用通过photoshop如何找到坐标点什么是css的sprites将众多资源图片文件统一整合到一张图片中，通过坐标位置使用资源图片，降低页面多资源图片的请求次数，提高页面加载速度。
sprites的主要css属性属性名属性含义示例background-image为元素设置背景图像。默认地，背景图像位于元素的左上角，并在水平和垂直方向上重复。background-image:url(sprite0613v3.png)background-repeat设置是否及如何重复背景图像。默认地，背景图像在水平和垂直方向上重复。background-repeat:nobackground-position设置背景图像的起始位置。background-position:-102px -109pxsprites怎么使用下图为一个示例的sprites图片，可以看出多个图标资源聚集在一张图片中。
下面的代码是通过坐标定位到logo和红点的代码
最终展现如下：
通过photoshop如何找到坐标点通过上面的代码可以知道，sprites的关键在于如何定位资源的x、y轴坐标以及它的长宽。将资源图片通过photoshop打开，点击菜单栏”窗口“调出”信息窗口“，通过”矩形选择工具“选择需要定位的资源，在信息窗口中得出需要的sprites值。
x、y坐标需要使用负数，0坐标除外。
版权所有，本作品采用知识共享署名-非商业性使用 3.0 未本地化版本许可协议进行许可。转载请注明出处：https://www.wangjun.dev//2017/04/css-sprites/Related posts