维护 起来更加方便。 CSS Sprites 缺点 1.在图片合并的时候,你要把多张图片有序的合理的合并成一张图片,还要留好足够的空间,防止板块内 不会出现不必要的背景;这些还好,最痛苦的是在宽屏,高分辨率的屏幕下的自适应页面,你的图片如果 不够宽,很容易出现背景断裂; 2.CSS Sprites 在开发的时候比较麻烦,你要通过photoshop 或其他工具测量计算每一个背景单元的精 确位置,这是针线活,没什么难度,但是很繁琐;幸好腾讯的鬼哥用RIA 开发了一个CSS Sprites 样式 生成工具,虽然还有一些使用上的不灵活,但是已经比photoshop 测量来的方便多了,而且样式直接生 成,复制,拷贝就OK! 3.CSS Sprites 在维护的时候比较麻烦,如果页面背景有少许改动,一般就要改这张合并的图片,无需改 的地方最好不要动,这样避免改动更多的css,如果在原来的地方放不下,又只能(最好)往下加图片, 这样图片的字节就增加了,还要改动css。 CSS Sprite 的例子 这个网站将一些按钮、图标以及LOGO做成了CSS Sprites: Amazon 亚马逊使用的大幅、整齐巧妙的CSS Sprites: Apple 苹果网站使用CSS Sprites 来制作导航菜单的鼠标悬停效果: YouTube YouTube 使用了一个2008 像素高的CSS Sprites: CNN CNN 使用了非常简单谨慎的方案: Digg Digg 的方案比较复杂: Yahoo Yahoo 将他们漂亮的图标等距离排布起来: Google Google 使用了极其简化的方案: Dragon Interactive 一个丰富多彩的CSS Sprites 方案: TV1.rtp.pt 一个很大很酷的CSS Sprites 方案: CSS Sprites 常用来合并频繁使用的图形元素,如导航、LOGO、分割线、RSS 图标、按钮等。通常它们 不会作为网页内容出现,因为涉及内容的图片并不是每个页面都一样。 关于CSS Sprites 的文章 最权威的CSS Sprites 介绍文章之一: CSS Sprites: Image Slicing’s Kiss Death中文版:样式表贴图定位(CSS Sprites):图像切片的死亡之吻 一篇图文并茂的介绍文章: CSS Sprites: What WhyThey’re Cool UseThem 介绍Yahoo、AOL 等网站使用CSS Sprites 降低服务器压力的案例: How Yahoo.com AOL.comImprove Web Performance CSSSprites 又一篇介绍文章: What CSSSprites? Dave Shea 的思考:是不是真的有必要简历复杂的大型CSS Sprites?答案是不!不要搞得太复杂, 找到一个折中的方案才是正道: Sprite Optimization 一篇教程,其源文件可下载学习: Creating Easy UsefulCSS Sprites 一个快速翻转效果的例子: Fast Rollovers Without Preload 另一个例子:使用CSS Sprites 实现背景圆角: CSS Sprites Roundedcorners 一篇教程: CSS Image Sprites 非常详细的教程,介绍了CSS Sprites 的原理和应用方法。 Optimize Your Website Using CSS Image Sprites 一个比较特别的应用: Animated GIF CSSSprites 怎样制作简单的悬停菜单效果: Image Sprite Navigation CSS还是悬停效果: Advanced CSS Menu 一个非常基本的教程: Creating UsingCSS Sprites CSS Sprites 视频教程 How UseCSS Sprites David Perel 解释了CSS Sprites 的基本概念,并演示了如何在网页中使用它,长度:10 分钟 Creating Rounded Buttons CSSSprites 继续上面的教程,展示了如何制作滑动按钮 Exactly How UseCSS Sprites Andres Fernandez 展示了 CSS sprites 如何加快加载时间和减少请求次数 How UseCSS Sprites Chris Coyier 展示了一个 CSS sprites 的范例,他将8 幅图片组合在了一起,并且使用jQuery 制作了 一个小程序。 Faster Page Loads ImageConcatenation 对于复杂的网站,减少图片请求数量可以减轻服务器负担,这是许多站长所希望看到的。 CSS Image Sprites 10Minutes 另一个关于导航菜单的教程 CSS: Using Percentages Background-ImageCSS Sprite 制作工具 Data URI Sprites DURIS (Data URI [CSS] Sprites) 是一个管理网页图片的新工具,它可以最大限度的帮助你减少背景 图片的数量,减少请求数。 Spritr 一个生成CSS Sprites 的简单工具 Sprite Creator 1.0 同上 CSS Sprite Generator 制作CSS sprites 的Drupal 插件 CSS Sprites Generator 这个工具允许你上传多张图片生成CSS Sprites 和CSS 代码 Projekt Fondue CSS Sprite Generator 它具有忽略重复图像,调整图像精度,确定横向和纵向偏移,指定背景色和透明度,指定CSS 前缀等众多 功能。 CSS Sprite 实例 background-position(图像背景位置)这个属性是CSS 中非常重要的属性。 根据CSS 规范,background-position 属性包含了两个(可选的)变量:水平位置(horizontal)和垂直位 置(vertical),例如: background-image:url(bg.gif); background-position:[horizontal position] [vertical position]; background-image:url(bg.gif); background-position: [horizontal position] [vertical position]; 使用这个属性,你可以定义块级元素的背景图像位置,可以使用%百分比或px像素为单位来定义图像开 始的位置,也可以使用关键字:top left, top center, top right, center left, center center, center right, bottom left, bottom center, bottom right. ”这样一个语句中,x%指水平偏移,y%指垂直偏移,左上角是:0%,0%,右下角是:100%,100%,默认的是50%。 例如,你可以这样定义: ulli background-image:url(bg.gif); background-position:19px 85px; 这样背景图片就被定位到了距离左侧19像素,距离上边85 像素。 关于这个属性,可以在这里找到更详细的资料:background-position (CSS property) 最后说明一下,这篇文章是综合了网上几处优秀的教程,同时加入了自己的观念撰写的。所以并非全转载,也并非全原创。