CSSSprites(CSS图像拼合技术)教程、工具集合.docVIP

CSS Sprites(CSS图像拼合技术)教程、工具集合 2009年05月20日 | 暴风彬彬 上一篇：Web UI 设计(网页设计)命名规范 ? 下一篇：展示:大学时期做的第一个xHTML+CSS项目 ? 今天彬Go将向大家推荐目前为止最全的CSS Sprites(CSS图像拼合技术)技巧、工具和教程集合，该集合是有一位国外设计师收集整合，并由 oncoding翻译成中文的，感谢他们的辛苦贡献。CSS Sprites技术在国外并不是什么新技术，只不过近两年(尤其08年开始)中国开始流行这个词，大家也开始越来越关注CSS Sprites这个没有标准中文翻译的技术。CSS Sprites这个词如果直译的话是”CSS精灵”的意思，它显然无法表达其技术的内涵。通常我们把它叫做CSS图像拼合技术,当然还有人把CSS Sprites叫做”CSS贴图定位”。无论怎么叫，它的技术核心是不变的，下面让我们来了解一下这篇CSS Sprites(CSS图像拼合技术)技巧、工具和教程集合吧。您还可以参考以下JavaScript/CSS相关教程及资源:《43个实例xHTML+CSS(DIV+CSS)网页及导航布局教程》《30个基于CSS的导航和按钮优秀设计教程》《2008年最佳Web设计/前端开发技巧、脚本及资源总结》《使用CSS为图片添加更多趣味的5种方法》《精选30个优秀的CSS技术和实例》 什么是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降低负载之间权衡利弊，选择最适合你的项目 的方式。 下面是一些CSS Sprites的使用范例： Xing 这个网站将一些按钮、图标以及LOGO做成了CSS Sprites： Amazon 亚马逊使用的大幅、整齐巧妙的CSS Sprites： Apple 苹果网站使用CSS Sprites来制作导航菜单的鼠标悬停效果： YouTube YouTube使用了一个2008像素高的CSS Sprites： CNNCNN使用了非常简单谨慎的方案： DiggDigg的方案比较复杂： YahooYahoo将他们漂亮的图标等距离排布起来： GoogleGoogle使用了极其简化的方案： Dragon Interactive 一个丰富多彩的CSS Sprites方案： TV1.rtp.pt 一个很大很酷的CSS Sprites方案 CSS Sprites常用来合并频繁使用的图形元素，如导航、LOGO、分割线、RSS图标、按钮等。通常它们不会作为网页内容出现，因为涉及内容的图片并不是每个页面都一样。 关于CSS Sprites的文章 CSS Sprites: Image Slicing’s Kiss of Death 中文版:样式表贴图定位（CSS Sprites）：图像切片的死亡之吻 最权威的CSS Sprites介绍文章之一 CSS Sprites: What They Are, Why They’re Cool And How To Us