CSS精灵

一，CSS Sprites的原理（图片整合技术）(CSS精灵)

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

二、图片整合的优势：

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

2）通过整合图片来减小图片的体积。

 

3、图片整合原则

1）边切图边整合。

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

3）将小图标预留足够的空间，因为使用这些图标元素通常会有大量的内容而且可能需要扩展的间距，以至于其它的图片可能会意外出现在本区域内。一般的情况下，会将这些小图标整合到文件的最右侧。

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

5）按分类整合图片。

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

 

 

 

2、CSS Sprites的实现方法

（1）滑动门技术

1.什么是滑动门

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

 

2.滑动门特征：

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

 

 

 

2.图片整合的综合案例应用（名鞋库网页书写）

 3．使用 PS 工具制作精灵图

 4．PS 的基本讲解

a. 标尺、形状、抓手、缩放、前景色、背景色、蒙版工具的基本使用 b. 综合利用所有工具完成简单的修图 c. 图层的新建、删除、编组、移动基本操作

 

 

b. 新建参考线  alt+V+E    视图  > 新建参考线

Ctrl+E  合并图层

 

 

pointer-events: 除了指定元素不成为鼠标事件的目标，none 值还指示鼠标事件穿过该元素，并指向位于元素下面的元素。元素应用了该 CSS 属性，链接，点击什么的都变成了“浮云“，让元素实体虚化，虚化可以理解为是幽灵的躯体。当我们用手触碰它的时候可以轻易地没有任何感觉地从中穿过去。input[type=text|button|radio|checkbox] 支持 disabled 属性，可以实现事件的完全禁用。如果其他标签需要类似的禁用效果，可以试试 pointer-events: none

例：<a href="#" style="pointer-events: none">click me</a>这个链接，你是点不了的，并且 hover 也没有效果，仅仅是鼠标事件失效，