部署CSS精灵

第一部分 – 第14章

CSS

当移动网站页面使用大量图片（例如超过20个）时，网站浏览器必须请求并下载每一个图片文件，这会耗费相当多的时间并减缓移动网站页面的加载。

然而，我们可以将这些图片合并为一个单一图片。这将减少http请求的数量，并使移动网站加载明显加快。图片的合并可以使用CSS精灵进行，其实现步骤如下：

  • 创建这个图片。
  • 放置这个图片。
  • 使用这个图片。

合并并创建图片

例如，我们有2个小图片，大小均为50像素×50像素。

  • 通过合并这两张图片来创建一个单一图片。合并后的图片将成为大小为100像素×50像素的大图片（例如宽是100像素，长是50像素）。
  • 将合并后的图片命名为combined.png。

CSS Sprites

放置图片

这张合并后的图片实际上是由第一张图片置于第二章图片正上方的两张图片组成的。

将如下行添加到页面的CSS文件上。

  • firstimg是定义好的类名。
  • 以宽度和高度的方式，指定第一张图片（在合并后的单一大图片combined.png内）的大小。
  • background:url(images/combined.png)- 我们将在div标签中以背景图片的方式使用该图片。
  • 0 0px指定了图片的坐标，指该图片的位置从图片combined.png的左上角开始。 
.firstimg {width:50px; height:50px; background:url(images/combined.png) 0 0px;}

我们还要在同样的CSS文件中添加如下行。这行代码是用来定义第二章图片（在合并后的单一大图片combined.png内）。注意图片位置是从0 -50px开始。 

.secondimg {width:50px; height:50px; background:url(images/combined.png) 0 -50px;}

使用图片

在一个空的div标签内指定类firstimg， 从而在网站页面的HTML代码中使用第一张图片。 

<body>
<div class="firstimg"></div>
</body>

在一个空的div标签内指定类secondimg，从而在网站页面的HTML代码中使用第二张图片。 

<body>
<div class="secondimg"></div>
</body>

移动网站性能技术白皮书在2017年3月正式出版。

英文版：Implement CSS Sprites – 繁体中文版：部署CSS精灵






移动网站性能技术白皮书上的内容按下列许可协议发布： CC Attribution-Noncommercial 4.0 International

Gordon Choi's Mobile Website Book