引用：http://blog.doyoe.com/article.asp?id=25
为了加快页面访问速度，我们可能会想到多种可行的办法：如提升硬性条件方面的性能、减少HTTP请求次数，使用Cache，合并文件（aoao总结的把js和css合并成一个文件非常好玩）等等。
这里主要讲一下如何节省图片的请求次数，至于如何能减少图片请求，不外乎就是减少实际图片的数量和代码的编写质量。
那么，如何才能减少图片的数量呢？我们可以把一些不经常变动的图片由原来分割成的多张小图合并成一张，然后通过CSS背景切割来加快完成渲染，这样就减少了实际图片的数量，也就减少了部分图片请求。至于这种技术，我们暂时叫它css sprites。
如下面这个圆角框架的处理：
［效果演示：http://www.doyoe.com/model/xhtmlcss/style/cssimg/1.htm］
CSS部分：
#list{
width:198px;
}
.hd,.ft{
background:url(skin/bg_01.gif) no-repeat;
}
.hd h3{
height:30px;
line-height:30px;
text-indent:5px;
}
.bd{
border-left:1px solid #aaa;
border-right:1px solid #aaa;
padding:5px;
}
.ft{
overflow:hidden;
height:6px;
background-position:left bottom;
}
XHTML部分：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="zh-cn" lang="zh-cn">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta http-equiv="Content-Language" content="zh-cn" />
<title>DY CSS图片切割</title>
<meta name="description" content="使用css sprites技术切割合并背景图片以减少HTTP请求" />
<meta name="keywords" content="css sprites, 图片切割, 图片合并, HTTP请求" />
<meta name="Author" content="Doyoe(飘零雾雨), dooyoe@gmail.com" />
</head>
<body>
<div id="list">
<div class="hd"><h3>顶部边框（标题）</h3></div>
<div class="bd">正文<br />大段正文内容<br />还可以写更多的内容</div>
<div class="ft"><!--底部边框--></div>
</div>
</body>
</html>
以往做圆角的东东，一般可能会做成2，3张图片。而可以看到，这个例子仅用了一张图片，所以也会减少不少图片请求。
先看一下CSS是如何写的：首先在.top和.bot中定义了背景图片，这是自然的，要用背景肯定得定义背景图片，这是天经地义的，这里肯定没有什么出采的地方。接着设置background-position样式来达到只显示背景图的某个区域。
因为.top和.bot调用的是同一张背景图片，所以就同时给它们定义，省得单独需要定义2次，这样写也减少了不少字节哦：）
再一个疑问就是中间部分是如何解决边框问题的。可以看到，只需要定义左右两边的border就可以搞定。
至此，关于合并图片，并利用CSS进行背景切割以减少请求的简单例子就搞定了。
接下来，还会有一篇关于css sprites合并图片文章，css sprites应用。
