CSS Sprites的原理（图片整合技术）(CSS精灵)/雪碧图

CSS Sprites的原理（图片整合技术）(CSS精灵)/雪碧图

 

1、将导航背景图片，按钮背景图片等有规则的合并成一张背景图，即将多张图片合为一张整图，而后用background-position”来实现背景图片的定位技术。

2、图片整合的优点：

1）经过图片整合来减小对服务器的请求次数，从而提升 页面的加载速度。

2）经过整合图片来减少图片的体积。

 

二、CSS Sprites的实现方法

三、图片整合原则

1）边切图边整合。

2）定位时避免使用bottom,right等，用具体的数值，为了不当你的宽度或高度上扩展sprites图时出现位置的错误。

3）将小图标预留足够的空间，由于使用这些图标元素一般会有大量的内容并且可能须要扩展的间距，以致于其它的图片可能会意外出如今本区域内。通常的状况下，会将这些小图标整合到文件的最右侧。

4）单张整合好的sprite图片在100KB之内。

5）按分类整合图片。

6）为了方便计算尺寸，通常状况会将sprites图的坐标计算成整数倍。

快捷工具：   Github地址 https://github.com/iwangx/sprite

（1）滑动门技术

1.什么是滑动门

滑动门是一个形象的称呼，它利用CSS背景图像可层叠性，并容许彼此之上进行滑动来创造一些特殊动态效果

 

2.滑动门特征：

经过滑动门技术，可使CSS设计出来的导航菜单兼具传统布局的图像效果，与CSS布局的高效扩展性 。

案例地址：http://download.csdn.net/download/flqbestboy/9925828