您的位置：首页 > Web前端 > CSS

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

2008-04-16 14:46 344 查看

原图：<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<meta name="Author" content="飘零雾雨|edzmaster@gmail.com" />
<title>DY Css图片切割</title>
</head>
<body>
<div id="list">
<div class="top"><h3>顶部边框（标题）</h3></div>
<div class="mid">正文<br />大段正文内容</div>
<div class="bot top"></div>
</div>
</body>
</html>

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

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

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

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

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

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

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航