一、css 如何使用精灵图?
介绍如何使用精灵图使用前,我们要先知道什么是精灵图。只有先知道什么是精灵图,了解精灵图的原理了,我们才可是说使用精灵图。
1. 什么是css精灵图(sprite)?
css精灵图(sprite)直译为“CSS精灵”,也被称为通常被解释为“CSS图像拼合”、“CSS贴图定位”或“CSS图片精灵”、“CSS雪碧图”,是一种网页图片应用处理方式。其实就是把一个页面涉及到的所有零星图片都包含到一张大图中去,这样一来,当访问该页面时,载入的图片就不会像以前那样一幅一幅地慢慢显示出来了。
2.使用css精灵图(sprite)的方法
css精灵图(sprite)其实就是通过将多个图片融合到一张图里面,然后通过CSS background背景定位技术技巧布局网页背景。在需要用到图片的时候,现阶段是通过CSS属性background-image组合background-repeat, background-position等来实现图片的显示。
3.代码实现:
使用到的精灵图(sprite)素材:incn.png
img{
background-image: url(icno.png);//引用精灵图(sprite):incn.png
background-size: 60px 40px; //设置精灵图大小
background-position: 0 0; //设置精灵图位置
}
使用到的核心代码:
background-image: url(icno.png);---为sprites里的span元素设置背景图像,引用了精灵图(incn.png);
background-size: 60px 40px; ---为背景图像调整尺寸大小,使得sprites盒子的span元素的背景图像固定为宽(60px),高(40px);
background-position 属性---这是最关键的代码,图片定位。设置或检索sprites盒子的span元素的背景图像位置。必须先指定 background-image 属性才可使用。