也谈 CSS Sprites
作者:heiniu 来源:Alimama UED 时间:2009-10-06 15:14:00
CSS Sprites 简介:
通常被意译为“CSS图像拼合”或“CSS贴图定位”。CSS Sprites并不是一门新技术,目前它已经在网页开发中发展得较为成熟,阿里巴巴各子公司的网页中到处都可发现css sprites 的影子。但CSS Sprites并不是什么金科玉律,但在很多情况下,它有着一定的优势,最重要的是它可以减轻服务器的负载,提高网页加载速度。随着Web设计向着精致、巧妙的方向发展,设计师们开始考虑使用非Javascript的方式制作鼠标滑过、悬停菜单的效果,这时CSS Sprite应运而生。
说白了,CSS Sprites其实就是把网页中一些背景图片整合到一张图片文件中,再利用CSS的“background-image”,“background- repeat”,“background-position”的组合进行背景定位,background-position可以用数字能精确的定位出背景图片的位置。
当页面加载时,不是加载每个单独图片,而是一次加载整个组合图片。这是一个了不起的改进,它大大减少了HTTP请求的次数,减轻服务器压力,同时缩短了悬停加载图片所需要的时间延迟,使效果更流畅,不会停顿。
CSS Sprites应用:在这方面,淘宝网做的比较好,我就以淘宝网为例吧。
[实例一:淘宝频道页面导航]
sprites图:
[实例二:淘宝首页]
sprites图:
标签:CSS,Sprites,菜单,背景
0
投稿
猜你喜欢
如何建设一个多语言版的ASP网站?
2009-11-26 20:36:00
javascript对象概念大全
2009-05-22 18:24:00
网页效果图设计之色彩索引
2008-03-23 13:53:00
关于字符集和Unicode的相关知识[译]
2010-03-13 14:17:00
10点优化sql数据库技巧
2008-06-09 15:00:00
防止Access 2000密码被破译的方法
2008-11-20 16:48:00
用mysql做站点时怎样记录未知错误的发生
2009-01-14 13:16:00
使用Title提升可访问性二
2009-11-16 12:53:00
汇总数据库备份 还原 压缩与数据库转移的方法
2009-01-19 14:07:00
OL IE Bug
2009-09-09 16:25:00
SQL SERVER 与ACCESS、EXCEL的数据转换方法分享
2012-02-25 20:17:22
asp实现的查询某关键词在MSSQL数据库位置的代码
2011-02-28 11:18:00
月影:JavaScript王者归来
2008-08-05 17:18:00
Mysql 数据库双机热备的配置方法
2010-06-09 19:13:00
兼容IE,FF的弹出层登陆界面代码
2008-01-04 12:13:00
区别Javascript中的Null与Undefined
2007-12-13 20:24:00
asp 删除数据库记录的代码
2011-02-05 10:39:00
用一条SQL实现:一行多个字段数据的最大值
2008-12-31 13:37:00
SQL Server 获取插入记录后的ID(自动编号)
2009-09-10 11:31:00
关于ASP中的类class
2007-08-19 15:37:00