解密CSS Sprites:技巧、工具和教程
来源:Oncoding编码营 发布时间:2011-01-11 19:38:00
简介
CSS Sprites并没有一个确定的中文翻译,通常被意译为“CSS图像拼合”或“CSS贴图定位”。CSS Sprites并不是一门新技术,目前它已经在网页开发中发展得较为成熟。本文系统的介绍了CSS Sprites的概念、用途和用法,相信本文会解决你在使用CSS Sprites中遇到的大部分问题。
本文系统的介绍了CSS Sprites的概念、用途和用法,相信本文会解决你在使用CSS Sprites中遇到的大部分问题。
什么是CSS Sprites?
“Sprite”(精灵)这个词在计算机图形学中有它独特的定义,由于游戏、视频等画质越来越高,必须有一种技术可以智能的处理材质和贴图,并且要同时保 持画面流畅。“Sprite”就是这样一种技术,它将许多图片组合到一个网格上,然后通过程序将每个网格的内容定位到画面上。
Sprite被定位到一副静态图片上,并且通过简单的程序或硬件即可正确定位到画面上,一幅幅图片就像是被“变”出来的,他们并没有单独占用内存,所以被取名为“Sprite精灵”。
上图是口袋妖怪的组合图片,可以点这里欣赏更多。不是加载每个但以图片
时间进行到2000年,Web设计向着精致、巧妙的方向发展。设计师们开始考虑使用非JavaScript的方 式制作鼠标滑过、悬停菜单的效果,这时CSS Sprite应运而生,它基于同上文提到的游戏Sprite同样的原理,并且使用CSS更容易控制,很快的流行开来。
2004年,Dave Shea 提出了一种使用CSS控制组合图片的方案 ,将许过小的图片组合在一起,使用CSS定义背景属性,来控制图片的显示位置和方式。
当页面加载时,不是加载每个单独图片,而是一次加载整个组合图片。这是一个了不起的改进,它大大减少了HTTP请求的次数,减轻服务器压力,同时缩短了悬停加载图片所需要的时间延迟,使效果更流畅,不会停顿。
CSS Sprites用在哪里?
CSS Sprites可以用在很多场合,大型网站可以将许多单独的图片,以有机的方式组合起来,从而使其便于维护和更新。图片之间通常会留出较大的空白,使 得图片不会影响网页的内容。但同时CSS Sprite大多使用于较固定的像素定位中,它的弹性较差,收到定位等因素的制约。所以,你需要在可维护性vs降低负载之间权衡利弊,选择最适合你的项目 的方式。
猜你喜欢
- Oracle中表的外键是保证系统参照完整性的手段,而参照完整性是指分布在两个表中的列所满足的具有主从性质的约束关系。外键涉及到两个表,其中一
- 创建用户定义函数,它是返回值的已保存的 Transact-SQL 例程。用户定义函数不能用于执行一组修改全局数据库状态的操作。与系统函数一样
- 有这样一个要求,它要创建一个SQL Server查询,其中包括基于事件时刻的累计值。典型的例子就是一个银行账户,因为你每一次都是在不同的时间
- 本文详细解说了MySQL Order By Rand()效率优化的方案,并给出了优化的思路过程,是篇不可多得的MySQL Order By
- Q0.创建用户【前提】 你必须有CREATE USER系统权限。当你使用CREATE USER语句创建一
- DatePart 的语法是 DatePart(interval, date),用以取 date 的某部分。 interval yyyy:da
- 自动弹出窗口是一个让人讨厌的事情,为什么我们用它来显示我们的调查表呢?用弹出窗口来显示调查表,被认为是达到我们收集访问用户信息的最方便快捷的
- 通过学习ASP明明白白你的If语句流程。If condition Then [statements1]E
- 一个Javascript 的类库,用于table内容排序。使用很方便,不用每次都去调用数据库了。特别适合多表查询的排序。加上<tbod
- 现象:在IE下,用JS修改p标签的innerHTML时,出"未知的运行时错误(unknown runtime error)&quo
- 这方面我还是一个freshman,不过看了一些文章,经过一些实践后也算是有了一些想法。希望如果有这方面的前辈路过的话,能不吝指教。首先,作为
- 用比较笨的方法来做abc ="AlkjA;lkjlkjAlkAkjAlkjAAAA" if instr(abc,&quo
- 在网页制作中,表单中的对象总是给人一种单调与沉闷的感觉,比如说按钮、文本框等,它们一成不变的模样与颜色
- IE 开发团队更改了 IE8 的 User-agent ,更改的部分信息如下:IE8 on Windows Vista (Compatibi
- 如何让页面背景五彩缤纷? <%@ Language=VBScript %><html>
- 校验是否全由数字组成function isDigit(s) { var patrn=/^[0-9]{1,20}$/; if (!patrn.
- 第一步一般是建立一个关键字替换表 如 id keyword url 等字段第二步是文章显示时把【文章】内容和【关键字替换表】对应的关键字替换
- Silverlight和Flash,到底谁更强?谁更有优势?很多初接触Silverlight和Flash的人总是会问这个问题,因为它们在表面
- 之前用Crystal做了一个数字转English Word的Formula刚刚心血来潮, 大半个晚上写了JS版本的数字转换, 由于JS的Bu
- asp之日期和时间函数示例可以使用日期和时间函数来得到各种格式的日期和时间函数语法说明示例NowNow()取得系统当前的日期和