提醒：本文最后更新于 2026-05-24 04:55，文中所关联的信息可能已发生改变，请知悉！
为了有效地减小服务器接受和发送请求的次数，提高页面的加载速度，出现了 CSS 精灵技术（也称 CSS Sprites，CSS 雪碧）
编辑
精灵技术使用的核心
首先我们知道，css 精灵技术主要针对于背景图片，插入的图片 img 是不需要这个技术的。
首先测量所需图片在整张精灵图上的为值，测量为 X 轴方向，Y 轴方向。
使用 background 将精灵引入，并且确定好位置。
因为以左上角 X，Y 的 0 点，所以 X，Y 轴的距离均使用负值。
css 中滑动门
制作网页时，为了美观，常常需要为网页元素设置特殊形状的背景，但是文字不一样长，所需要的背景也不一样长，这样就会出现一些问题。
为了使各种特殊形状的背景能够自适应元素中文本内容的多少，出现了 CSS 滑动门技术。它从新的角度构建页面，使各种特殊形状的背景能够自由拉伸滑动，以适应元素内部的文本内容，可用性更强。最常见于各种导航栏的滑动门。
核心技术
核心技术就是利用 CSS 精灵（主要是背景位置）和 盒子 padding 撑开宽度, 以便能适应不同字数的导航栏。
精灵技术使用的核心
首先我们知道，css 精灵技术主要针对于背景图片，插入的图片 img 是不需要这个技术的。
首先测量所需图片在整张精灵图上的为值，测量为 X 轴方向，Y 轴方向。
使用 background 将精灵引入，并且确定好位置。
因为以左上角 X，Y 的 0 点，所以 X，Y 轴的距离均使用负值。
css 中滑动门
制作网页时，为了美观，常常需要为网页元素设置特殊形状的背景，但是文字不一样长，所需要的背景也不一样长，这样就会出现一些问题。
为了使各种特殊形状的背景能够自适应元素中文本内容的多少，出现了 CSS 滑动门技术。它从新的角度构建页面，使各种特殊形状的背景能够自由拉伸滑动，以适应元素内部的文本内容，可用性更强。最常见于各种导航栏的滑动门。
核心技术
核心技术就是利用 CSS 精灵（主要是背景位置）和 盒子 padding 撑开宽度, 以便能适应不同字数的导航栏。
作者：courageFei
来源：CSDN
原文：https://blog.csdn.net/qq_36647038/article/details/
由于网页中细碎的小图片很多，会导致向服务器发送 N 多次请求，这样不仅降低了页面的加载速度，也会影响服务器的效率。
** 为了有效地减少服务器接受和发送请求的次数，提高页面的加载速度。
聪明机智的前辈们研究出了 CSS 精灵技术（也称 CSS Sprites、CSS 雪碧）。
CSS 精灵其实是将网页中的一些背景图像整合到一张大图中（精灵图），然而，各个网页元素通常只需要精灵图中不同位置的某个小图，要想精确定位到精灵图中的某个小图。需要用到 background-img 属性，background-position 属性，当然也可以连写起来，都写在 background 属性中。
