CSS Sprites（截取部分图片）是怎么工作的

最新推荐文章于 2025-05-19 21:37:59 发布

johennes

最新推荐文章于 2025-05-19 21:37:59 发布

阅读量2.5k

点赞数

CC 4.0 BY-SA版权

文章标签： css 工作 javascript class 服务器 div

本文链接：https://blog.youkuaiyun.com/johennes/article/details/7715711

本文介绍了一种减少HTTP请求次数的技术——CSS Sprites，通过将多个小图标整合成一张大图，并利用CSS背景定位来展示不同图标，从而达到减少服务器负载的目的。文章详细解释了其实现原理并提供了具体的实现步骤。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

CSS Sprites的最初的想法是可以通过<img>标签和JAVASCRIPT中的onmouseover和onmouseout的事件使用CSS来切换一张大图片中的坐标位置显示到DIV上来实现图片的变化。

主要的功能是通过背景图片的定位来显示图片的局部，当很多小图片放在一张图片上然后加载，就可以减少图片加载时服务器的开销

如亚马逊网站的各类图标：

只需一张图片即可完成加载所有的按钮和图标。

下面就来介绍一下CSS Sprites的工作原理

我们以上图来作为背景图片

初始坐标x=0,y=0的图片显示如下图

当变换了坐标值，则图片就沿左边向上或左方移动，如坐标为x=0,y=-48时，图片位置变为如下图

例子：

在需要用到图片的时候，现阶段是通过CSS属性background-image组合background-repeat, background-position等来实现。通过调整background-position的数值，背景图片就能以不同的面貌出现在你眼前。

我们使用下图sprite.png来作为例子：

新建两个DIV

<div class="max">最大化</div>
<div class="min">最小化</div>

配置CSS样式：

.min, .max {
  width:16px;
  height:16px;
  background-image:url(sprite.png);
  background-repeat: no-repeat; /*我们并不想让它平铺*/
  text-indent:-999em; /*隐藏文本的一种方法*/
}

当还没有指定background-position时，默认为 0 0，可以看下图片，处于的位置正是灰块。接下来我们要找到代表最大化的加号和代表最小化的减号的位置找出来。经过测量，最大化按钮位于Y轴的350px处，最小化按钮位于Y轴400px处。需要向上移动图片，得到代码如下：

.max { background-position: 0 -350px;}
.min { background-position: 0 -400px;}

这样就完成了图片的定位显示，如果需要配置动态变更图片，只需在JS方法中变更background-position就可以了。