概述
css精灵英文叫法 css sprites,通常被解释为“CSS 图像拼合”或“CSS 贴图定位”;其实就
是把网页中一些背景图片整合到一张图片文件中,再利用 CSS “background-image”,
“background- repeat”,“background-position”的组合进行背景定位,background-position 精确的定位出背景图片的位置
1、精灵图的原理
- 将页面中的背景图合并成一张图片
- 利用背景属性,使不同元素显示图片的不同部分
实现步骤:
1.测量图片大小
2.通过引入背景图片,用背景定位实现
2、css sprites的优缺点
- 优点:
1.减少网页的http请求,提高页面的性能
2.减少在图片上的命名困扰
3.更换网页风格方便
- 缺点:
1.必须要限定容器的大小
2.背景图位置需要计算
3、适用场景
适用于一般小图片(如小图标,小背景),不适合大背景大布局背景。
二、滑动门
概述:
css精灵图可以实现特殊形状的背景自由拉伸滑动,能适应不同字数的内容