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

原创 2007年09月29日 09:44:00

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

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

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

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

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

CSS部分:

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;
}

XHTML部分:

<!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进行背景切割以减少请求的简单例子就搞定了。

 

css sprite技术 – 减少网站图片请求次数

CSS Sprites在国内很多人叫css精灵,是一种网页图片应用处理方式。它允许你将一个页面涉及到的所有零星图片都包含到一张大图中去,这样一来,当访问该页面时,载入的图片就不会像以前那样一幅一幅地慢...

减少请求最有效方法:CSS Sprites 图片合并技术

假如我们想截取高100px 宽800px 中X坐标:200px,Y坐标:0px;Width:20px;Height:20px;图片名称:1.gifbackground:url(1.gif):导入图片 ...
  • isea533
  • isea533
  • 2012年02月15日 21:28
  • 3387

用DIV+CSS切割多背景合并图片 CSS Sprites 技术

很久之前就在互联网网站和一些js插件中见过这种技术的应用,当时觉得很麻烦,就没有用,也没有去深究。 近段时间一直在做前台的一些东西,涉及到很多div+css的问题。这个东东我又碰到了,所以我花了...

用DIV+CSS切割多背景合并图片 CSS Sprites 技术

用DIV+CSS切割多背景合并图片 CSS Sprites 技术 博客分类: div+css   很久之前就在互联网网站和一些js插件中见过这种技术的应用,当时觉得很麻烦,就没有用...

CSS之图片的合并及使用

作为一个开发人员前后台一并开发是常有的事.

Gulp压缩、合并js/css文件,压缩图片以及热更新教程

Gulp压缩教程:(需全局安装gulp $ npm install gulp -g) 1、cdm进入项目根目录 npm init(生成一个package.json,保存当前项目的依赖) 2、安装相关...

CSS split图片合并器!table转化div

  • 2011年08月20日 17:39
  • 473KB
  • 下载

在ASP.NET中自动合并小图片并使用CSS Sprite显示出来

合并图片小工具

Gulp压缩合并js/css文件,压缩图片,以及热更新教程

var gulp = require('gulp'); var concat = require('gulp-concat');//- 多个文件合并为一个; var minifyCss = requi...
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:合并图片,用CSS切割以减少图片请求次数
举报原因:
原因补充:

(最多只允许输入30个字)