css图片背景之雪碧图的使用
目录
雪碧图的使用步骤
雪碧图的特点
雪碧图样例
举个例子
示例代码
雪碧图的使用步骤
- 先确定要使用的图标
- 测量图标的大小
- 根据测量结果创建一个元素
- 将雪碧图设置为元素的背景图片
- 设置一个偏移量以显示正确的图片
雪碧图的特点
一次性将多个图片加载进页面，降低请求的次数，加快访问速度，提升用户的体验。
雪碧图样例
举个例子
假设我们要使用图中红色标记的图像作为背景
在ps中查看该图像的宽和高并设置为盒子属性
将该图像在x轴和y轴的长度分别设置为background-position属性，注意（两个值为负）
最后便能在页面正常显示该图像了
示例代码
Document div{ width: 34px; height: 24px; background-image: url("./images/amazon-sprite_.png"); background-position: -129px -339px; } 
