请解释 css sprite 技术的含义

1 、什么是css sprite

css sprite很多人叫css精灵，一种网页图片应用处理方式。它允许你将一个页面涉及到的所有零星图片都包含到一张大图中去。当访问页面时，载入的图片就不会一张一张的慢慢显示出来了。12

2、css sprite原理

css sprite其实就是把网页中一些背景图片整合到一张图片文件中，再利用css的background-image，background-repeate，background-position的组合进行背景定位，background-position可以用数字精确的定位出背景图片的位置。12

3、css sprite 的优点

1.减少http请求次数，极大的提高页面加载速度。

2.增加图片信息重复读，提高压缩比，减少图片大小。

3.更换风格方便，只需在一张或几种图片上修改颜色或样式即可。整个网页的风格就可以改变，维护起来更加方便。1234

4、css sprite的缺点

1.在图片合并时，需要留给足够的空间。在高分辨率的屏幕下的自适应页面，如果图片宽度不够，会造成背景断裂。

2.css sprite需要精确定位出图片的位置，比较繁琐，不够灵活。

3.维护麻烦，修改一个图片可能需要重新布局整个图片，样式。

1.如何设置标签的背景颜色?

1.如何设置背景图片?

注意点:

1.如何控制背景图片的平铺方式?

应用场景:可以通过背景图片的平铺来降低图片的大小, 提升网页的访问速度

1.如何控制背景图片的位置?

注意点:同一个标签可以同时设置背景颜色和背景图片, 如果颜色和图片同时存在, 那么图片会覆盖颜色

1.背景属性缩写的格式

2.注意点：background属性中， 任何一个属性都可以被省略

3.什么是背景关联方式？

4.如何修改背景关联方式？

1.背景图片和插入图片区别?

1.什么是CSS精灵图

CSS精灵图是一种 图像合成技术

2.CSS精灵图作用

可以减少请求的次数, 以及可以降低服务器处理压力

3.如何使用CSS精灵图

CSS的精灵图需要配合背景图片和背景定位来使用

这种做法叫做css精灵，CSS Sprites，或者集合图片法。

原理：

原理就是把所有图片（前提是图片较小）都集合在一张图中，然后利用css样式中的background-position属性来准确定位到位置。

优点：

可以减少http请求，提高性能，本来四张图片要请求四次，现在一次搞定。

缺点：

就是处理起来比较麻烦，需要改动其中一个就要改整个图。

需要用ps先定位好每个图片的位置。

对html容器也有较高的要求，宽高都对背景会有依赖。

所以建议在比较稳定的页面，不需要经常改动的地方用css精灵的方法，如果需求经常变动，我觉得直接用单图也可以。

---