CSS中的精灵技术

CSS中的精灵技术

在制作网页的过程中我们会用很多个细碎的小图，每当用户访问一个网站时，需要向服务器发送请求，网页上的每张图像都要经过一次请求才能展现给用户。

由于网页中细碎的小图片很多，会导致向服务器发送N多次请求，这样不仅降低了页面的加载速度，也会影响服务器的效率。

**为了有效地减少服务器接受和发送请求的次数，提高页面的加载速度。

聪明机智的前辈们研究出了CSS精灵技术（也称CSS Sprites、CSS雪碧）。

CSS 精灵其实是将网页中的一些背景图像整合到一张大图中（精灵图），然而，各个网页元素通常只需要精灵图中不同位置的某个小图，要想精确定位到精灵图中的某个小图。需要用到background-img属性，background-position属性，当然也可以连写起来，都写在background属性中。

这样，当用户访问该页面时，只需向服务发送一次请求，通过定位就可以将网页中的背景图像全部展示出来。

主要就是用CSS的

• background-image、
• background-repeat
• background-position属性进行背景定位，
• 其中最关键的是使用background-position 属性精确地定位。

精灵技术使用的核心

首先我们知道，css精灵技术主要针对于背景图片，插入的图片img 是不需要这个技术的。

• 首先测量所需图片在整张精灵图上的为值，测量为X轴方向，Y轴方向。
• 使用background将精灵引入，并且确定好位置。
• 因为以左上角X，Y的0点，所以X，Y轴的距离均使用负值。

css中滑动门

制作网页时，为了美观，常常需要为网页元素设置特殊形状的背景，但是文字不一样长，所需要的背景也不一样长，这样就会出现一些问题。

为了使各种特殊形状的背景能够自适应元素中文本内容的多少，出现了CSS滑动门技术。它从新的角度构建页面，使各种特殊形状的背景能够*拉伸滑动，以适应元素内部的文本内容，可用性更强。 最常见于各种导航栏的滑动门。

核心技术

核心技术就是利用CSS精灵（主要是背景位置）和 盒子padding撑开宽度, 以便能适应不同字数的导航栏。

一般的经典布局都是这样的：

<li>
  <a href="#">
    <span>导航栏内容</span>
  </a>
</li>

以下附上我的代码可以作参考