【转】Java 高性能Web 开发(2)-图像合并实现 CSS Sprites

CSS Sprites 是一个吸引人的技术，它其实就是把网页中一些背景图片整合到一张图片文件中，再利用 CSS 的“background-image”，“background- repeat”，“background-position”的组合进行背景定位，background-position 可以用数字能精确的定位出背景图片的位置。利用 CSS Sprites 能很好地减少网页的 HTTP 请求，从而大大的提高了页面的性能，这也是 CSS Sprites 最大的优点，也是其被广泛传播和应用的主要原因。

CSS Sprites 能减少图片的字节，由于图像合并后基本信息不用重复，那么多张图片合并成 1 张图片的字节往往总是小于这些图片的字节总和。同时 CSS Sprites 解决了网页设计师在图片命名上的困扰，只需对一张集合的图片上命名就可以了，不需要对每一个小元素进行命名，从而提高了网页的制作效率。更换风格方便，只需要在一张或少张图片上修改图片的颜色或样式，整个网页的风格就可以改变。维护起来更加方便。同时，由于将图片合并到一张图片，因此图片的请求数就被缩减到 1 个。其他的请求都可以用到本地缓存，不需要访问服务器。下图是一个合并以后的图片。它将很多小图标都拼到了一起。

   

    图 4. 合并后的图片

    

这里介绍一个小工具 ---“CSS Sprites 样式生成工具 2.0”，可以从 这里下载。这是一个简单免费的小工具，用该工具打开上面的图片，选中图片中的某块。如下图的“绿色大拇指”部分，工具会计算出这个部分的长、宽、距离左上角的距离。勾选复制类名、复制宽、复制高，再点击“复制当前样式”按钮。这样生成的样式会被复制到剪切板上。

 

    图 5. 小工具的使用

    

 

生成的 CSS 代码如清单 1 所示。

清单 1. 小工具生成的 CSS 代码

.div_6148{width:18px;height:20px;background-position:-17px -209px;} 

 

将这段代码运用在网页上，它的代码如下清单所示。

清单 2. 测试 CSS Sprites 代码

 

打开测试网页显示结果如下图所示。

    图 6. 测试网页效果

    

可以看到，网页只显示工具选择的“绿色大拇指”部分，这样的代码可以运用在网页的多个部分，而图片只需要下载一次，这就是该技术的最大优势，减少了因为小图片引起的多个请求。

 

原创文章@java教程网 转载请标明出处

java教程网编辑发布:希望本系列的文章对你的个人成长和发展有帮助。

从java新手入门,开发工具 到 Java进阶,高级编程,java教程网几乎囊括了java编程的所有方面的资料