合并图片，用CSS切割以减少图片请求次数

公告

View Post

html,body,h3 {

font-family:Verdana,Arial;

font-size:12px;

}

div {

overflow:hidden;

}

#list {

width:198px;

}

.top {

background:url(skin/bg_01.gif) left top no-repeat;

}

.top h3 {

margin:0;

height:30px;

line-height:30px;

text-indent:5px;

}

.mid {

border-left:1px solid #aaa;

border-right:1px solid #aaa;

padding:5px;

}

.bot {

height:6px;

background-position:left bottom;

}

原图：

为了加快页面访问速度，我们可能会想到多种可行的办法：如提升硬性条件方面的性能、减少HTTP请求次数，使用Cache，合并文件（aoao总结的把js和css合并成一个文件非常好玩）等等。

这里主要讲一下如何节省图片的请求次数，至于如何能减少图片请求，不外乎就是减少实际图片的数量和代码的编写质量。

我们可以把一些不经常变动的框架图片由原来分割成的多张小图合并成一张，然后通过CSS背景切割来加快完成渲染，这样就减少了实际图片的数量，也就减少了部分图片请求。

如下面这个圆角框架的处理：

［效果演示：http://www.doyoe.com/model/xhtmlcss/style/cssimg/1.htm］

CSS部分：

XHTML部分：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"

"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<html>

<head>

<title>DY Css图片切割</title>

</head>

<body>

<div class="mid">正文<br />大段正文内容</div>

</div>

</body>

</html>

以往做圆角的东东，一般可能会做成2，3张图片。而可以看到，这个例子仅用了一张图片，所以也会减少不少图片请求。

先看一下CSS是如何写的：首先在.top中定义了背景图片，这是自然的，要用背景肯定得定义背景图片，这是天经地义的，这里肯定没有什么出采的地方。主要看底部的边框是如何定义的：可以看到，我为底部边框单独定义了一个.bot样式，但可以发现，里面只一个控制背景图的position样式和高度的东东，甚至连背景图也没定义，此疑问一？

暂且放下css不看，先看xhtml部分的底部是如果写的，可以看到，我为底部赋了两个样式class="bot top"。这也就解了疑问一的惑，为什么.bot里面连背景图也不定义，只定义一个位置和高。这是因为.top里面已经定义了背景图，所以只需要在底补同时引用.top和.bot两个样式就行了，它会同时被这两个样式渲染。

这样写就省下了在.bot里再定义一次背景，减少了一次图片请求，也减少了不少字节哦：）

再一个疑问就是中间部分是如何解决边框问题的。可以看到，只需要定义左右两边的border就可以搞定。

至此，关于合并图片，并利用CSS进行背景切割以减少请求的简单例子就搞定了。

posted on 2008-04-16 14:46 Jake.SHI 阅读(891) 评论(0) 收藏举报

刷新页面返回顶部

炼丹炉中的孙悟空

公告

View Post

合并图片，用CSS切割以减少图片请求次数