众所周知,减少网站加载时间的最有效的方式之一就是减少网站的HTTP请求数。实现这一目标的一个有效的方法就是通过CSS Sprites——将多个图片整合到一个图片中,然后再用CSS来定位。
CSS Sprites 的目的就是通过整合图片,减少对服务器的请求数量,从而加快页面加载速度。
实现方法:
首先将小图片整合到一张大的图片上,为了简单化,可以把多图放在同一列上,这样就可以把x轴定义为0。
然后根据具体图标在大图上的位置,给背景定位。background-position:-8px -95px;
例子:
我们使用上图中的auther.gif作为背景时,如果代码如下:
<div class="max">最大化</div>
这两个class都使用同一个图片:
.max {
width:16px;
height:16px;
background-image:url(/images/css-sprites.gif);
background-repeat: no-repeat; //我们并不想让它平铺
text-indent:-999em; //隐藏文本的一种方法
}
效果都只能得到上图中的tag_icon.gif中的图为背景,根本无法得到我们需要的背景。因为我们还没有指定background-position,默认为 0 0,可以看下上图,刚好是tag_icon.gif图。好了,我们要找到代表auther.gif的图在大图中的位置找出来。经过测量,按钮位于Y轴的350px处,按钮位于x轴50px处。想一想我们如何才能让它们能够显示出来呢?明显得到代码如下:
.max {
background-position: 50 -350px;
}
耶,我们成功了:
(注意:为了举例的方便,本例子直接在HTML内置样式,切勿在实践中的非特殊情况使用这种方式)。
优点
我们从前面了解到,CSS Sprites为什么突然跑火,跟能够提升网站性能有关。显而易见,这是它的巨大优点之一。普通制作方式下的大量图片,现在合并成一个图片,大大减少了HTTP的连接数。HTTP连接数对网站的加载性能有重要影响。
缺点
至于可维护性,这是一般双刃剑。可能有人喜欢,有人不喜欢,因为每次的图片改动都得往这个图片删除或添加内容,显得稍微繁琐。而且算图片的位置(尤其是这种上千px的图)也是一件颇为不爽的事情。当然,在性能的口号下,这些都是可以克服的。
由于图片的位置需要固定为某个绝对数值,这就失去了诸如center之类的灵活性。
前面我们也提到了,必须限制盒子的大小才能使用CSS Sprites,否则可能会出现出现干扰图片的情况。这就是说,在一些需要非单向的平铺背景和需要网页缩放的情况下,CSS Sprites并不合适。YUI的解决方式是,加大图片之间的距离,这样可以保持有限度的缩放。
总结
性能压倒一切。CSS Sprites是值得推广的一种技术。尤其适宜用于FIR,比如固定大小的icon替换。为保持兼容性,图片中的各个部分保持一定的距离是一种不错的做法。
相关推荐
16.jQuery动态切换网页背景的大块图片的导航栏代码 17.jquery图文排行混合互相切换效果(仿Vancl效果) 18.jQuery图片插件之鼠标放在图片上出现动态的hover效果插件 19.jQuery图片自动轮播淡入淡出的幻灯插件...
CSS Sprites其实就是把网页中一些背景图片整合到一张图片文件中,再利用CSS的“background-image”,“background- repeat”,“background-position”的组合进行背景定位,background-position可以用数字精确的定位...
CSS精灵技术 ...1.主要针对于背景图片使用,就是把多个小背景图片整合到一张大图片中(以LOL官网为列,见图一和图二)。 2.这个大图片也称为sprites 精灵图 或者 雪碧图 3.移动背景图片位置,此时可以
在大家还在拨号上网的“远古时期”,由于网速的限制,页面开发者都喜欢把网页里面的图片字节数控制的非常小,往往在一个图片文件夹里散落着n多的小碎图。随着网络技术的发展,网速的提升,大家越来越重视页面的加载...
把背景图片都整合到一张图片中,然后用CSS的background-image和background-position属性来定位要显示的部分。 图像映射:可以把多张图片合并成单张图片,总大小是一样的,但减少了请求数并加速了页面加载。图片...
《Google Android SDK开发范例大全(第3版)》在上一版的基础上,以Android手机应用程序开发(采用Android SDK 2.3.3)为主题,超过200多个范例全面且深度地整合了手机、网络及服务等多个开发领域,为读者提高程序设计...
《Google Android SDK开发范例大全(第3版)》在上一版的基础上,以Android手机应用程序开发(采用Android SDK 2.3.3)为主题,超过200多个范例全面且深度地整合了手机、网络及服务等多个开发领域,为读者提高程序设计...
《Google Android SDK开发范例大全(第3版)》在上一版的基础上,以Android手机应用程序开发(采用Android SDK 2.3.3)为主题,超过200多个范例全面且深度地整合了手机、网络及服务等多个开发领域,为读者提高程序设计...
《Google Android SDK开发范例大全(第3版)》在上一版的基础上,以Android手机应用程序开发(采用Android SDK 2.3.3)为主题,超过200多个范例全面且深度地整合了手机、网络及服务等多个开发领域,为读者提高程序设计...
30、调整了部份程序CSS的对应,增加了左栏标题的背景图片,能使灵活地设置网页模板风格。 31、后台增加是否显示树状导航菜单、是否显示右键菜单、是否保存远程图片到本地和留言是否审核显示控制开关。 32、后台登录...
网趣网上购物系统率先支持商品图片水印设置功能,设置图片水印可以有效防止图片盗链,同时不易被修改和使用,更能表现出一个网站的特色风格,设置好水印后,添加商品上传图片时,会自动在图片上嵌入水印内容,彰显...
《Google Android SDK开发范例大全(第3版)》在上一版的基础上,以Android手机应用程序开发(采用Android SDK 2.3.3)为主题,超过200多个范例全面且深度地整合了手机、网络及服务等多个开发领域,为读者提高程序...
《google android sdk开发范例大全(第3版)》在上一版的基础上,以android手机应用程序开发(采用android sdk 2.3.3)为主题,超过200多个范例全面且深度地整合了手机、网络及服务等多个开发领域,为读者提高程序设计...
Imagevue是一个Flash幻灯效果的在线相册网站程序,您可以用他制作一个完整照片或图片展示网站,您也可以把他做为一个画廊、相册整合嵌入到您现有的网站里去。只要通过FTP把Imagevue程序上传到您的服务器空间上就可以...
4.纠正后台文章编辑,保存远程图片到本地,如果缩略图是网络图片没纠正成本地路径的BUG 5.删除网站参数设置里无用字段信息 6.后台友情链接新增 链接注释信息 栏 7.后台栏目编辑和单篇页编辑,加入模式选择(栏目、...
播放器介绍:1 拥有了更强大的列表处理能力 2,全新引入了选段播放功能 3,遇到错误连接或者断链可以自动转到下首播放 4,支持了动态解析地址的播放功能 4,内含Realplayer、Mediaplayer和Flashplayer三大播放引擎,基本...
资深美术设计师、网页设计师联手打造每一个页面,精心雕琢每一个细节,兼容所有主流浏览器! 2. 技术先进 基于当今全球最为流行的php mysql和WEB2.0应用,可整合discuz! phpwind(业界独家,双向同步) 等主流论坛...
ADO.NET 2.0 大批量数据操作和多个动态的结果集 ADO.NET 2.0 异步处理 在ASP.NET中使用WINDOWS验证方式连接SQL SERVER数据库 改进ADO.Net数据库访问方式 ASP.NET 2.0 绑定高级技巧 简单实用的DataSet更新数据库的类+...
资深美术设计师、网页设计师联手打造每一个页面,精心雕琢每一个细节,兼容所有主流浏览器! 2. 技术先进 基于当今全球最为流行的php mysql和WEB2.0应用,可整合discuz! phpwind(业界独家,双向同步) 等主流论坛...