本章给大家介绍css 怎样使用精灵图?background属性介绍(代码实例),让大家可以了解css精灵图(雪碧图)是怎样使用的。有一定的参考价值,有需要的朋友可以参考一下,希望对你有所帮助。
一、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等来实现图片的显示。