什么是CSS Sprite

CSS Sprite 又叫CSS精灵,是目前大型网站中经常运用的图片处理方式。它的原理很简单,将网站上零散的小图片(或图标)整合在一张大图上,再用CSS中“background-image”属性来定位图片的X/Y轴位置,从而减轻服务器对图片的请求数量,提高网页加载速度。因为对于当前大多数网速而言,不高于200KB的单张图片所需载入时间基本是差不多的,如果页面上有20张小图片或图标,那么服务器会载入20次。但使用CSS Sprite将图片整合成一张大图后,服务器只需要载入一次就够了,很大程度上优化了图片加载速度,这在门户型网站尤为明显。

CSS Sprites优点

1.利用CSS Sprites能很好地减少了网页的http请求,从而大大的提高了页面的性能,这也是CSS Sprites最大的优点,也是其被广泛传播和应用的主要原因;

2.CSS Sprites能减少图片的字节,曾经比较过多次3张图片合并成1张图片的字节总是小于这3张图片的字节总和。解决了网页设计师在图片命名上的困扰,只需对一张集合的图片上命名就可以了,不需要对每一个小元素进行命名,从而提高了网页的制作效率。

3.更换风格方便,只需要在一张或少张图片上修改图片的颜色或样式,整个网页的风格就可以改变。维护起来更加方便。

CSS Sprites缺点

1.在图片合并的时候,你要把多张图片有序的合理的合并成一张图片,还要留好足够的空间,防止板块内不会出现不必要的背景;这些还好,最痛苦的是在宽屏,高分辨率的屏幕下的自适应页面,你的图片如果不够宽,很容易出现背景断裂;

2.CSS Sprites在开发的时候比较麻烦,你要通过photoshop或其他工具测量计算每一个背景单元的精确位置,这是针线活,没什么难度,但是很繁琐;幸好腾讯的鬼哥用RIA开发了一个CSS Sprites 样式生成工具,虽然还有一些使用上的不灵活,但是已经比photoshop测量来的方便多了,而且样式直接生成,复制,拷贝就OK!

3.CSS Sprites在维护的时候比较麻烦,如果页面背景有少许改动,一般就要改这张合并的图片,无需改的地方最好不要动,这样避免改动更多的css,如果在原来的地方放不下,又只能(最好)往下加图片,这样图片的字节就增加了,还要改动css。

CSS Sprite的例子

这个网站将一些按钮、图标以及LOGO做成了CSS Sprites:

Amazon
亚马逊使用的大幅

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 of Death

中文版:样式表贴图定位(CSS Sprites):图像切片的死亡之吻

一篇图文并茂的介绍文章:

CSS Sprites: What They Are, Why They’re Cool And How To Use Them

介绍Yahoo、AOL等网站使用CSS Sprites降低服务器压力的案例:

How Yahoo.com and AOL.com Improve Web Performance With CSS Sprites

又一篇介绍文章:

What Are CSS Sprites?

Dave Shea的思考:是不是真的有必要简历复杂的大型CSS Sprites?答案是不!不要搞得太复杂,找到一个折中的方案才是正道:

Sprite Optimization

一篇教程,其源文件可下载学习:

Creating Easy and Useful CSS Sprites

一个快速翻转效果的例子:

Fast Rollovers Without Preload

另一个例子:使用CSS Sprites实现背景圆角:

CSS Sprites + Rounded corners

一篇教程:

CSS Image Sprites

非常详细的教程,介绍了CSS Sprites的原理和应用方法。

Optimize Your Website Using CSS Image Sprites

一个比较特别的应用:

Animated GIF For CSS Sprites

怎样制作简单的悬停菜单效果:

Image Sprite Navigation With CSS

还是悬停效果:

Advanced CSS Menu

一个非常基本的教程:

Creating and Using CSS Sprites

CSS Sprites视频教程How to Use CSS Sprites

David Perel解释了CSS Sprites的基本概念,并演示了如何在网页中使用它,长度:10分钟
Creating Rounded Buttons With CSS Sprites

继续上面的教程,展示了如何制作滑动按钮
Exactly How to Use CSS Sprites

Andres Fernandez 展示了 CSS sprites如何加快加载时间和减少请求次数
How To Use CSS Sprites

Chris Coyier 展示了一个 CSS sprites的范例,他将8幅图片组合在了一起,并且使用jQuery制作了一个小程序。
Faster Page Loads With Image Concatenation

对于复杂的网站,减少图片请求数量可以减轻服务器负担,这是许多站长所希望看到的。
CSS Image Sprites In 10 Minutes

另一个关于导航菜单的教程
CSS: Using Percentages in Background-Image

CSS 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),例如:

 
1
2
3
4
 .introduction {
background-image: url(bg.gif);
background-position: [horizontal position] [vertical position];
 }

.introduction { 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.

在“ background-position: x% y%; ”这样一个语句中,x%指水平偏移,y%指垂直偏移,左上角是:0%,0%,右下角是:100%,100%,默认的是50%。

例如,你可以这样定义:

 
1
2
3
4
 ul li {
background-image: url(bg.gif);
background-position: 19px 85px;
},

这样背景图片就被定位到了距离左侧19像素,距离上边85像素。

关于这个属性,可以在这里找到更详细的资料:background-position (CSS property) 。

转载自:w3cfuns

【转】CSS Sprites教程大全(使用方法、工具介绍)的更多相关文章

  1. 异步加载css 和 谷歌浏览器各实用小工具介绍

    异步加载css资源 加开页面首屏显示速度使我们前端一直在追求的目标,而css资源在这些优化中同样也是不可或缺的. 一个网站可能有一部分css资源是必须的,他需要在页面渲染完之前就被加载完,并和html ...

  2. CSS Sprites (CSS图像拼合技术)教程工具

    什么是CSS Sprites? “Sprite”(精灵)这个词在计算机图形学中有它独特的定义,由于游戏.视频等画质越来越高,必须有一种技术可以智能的处理材质和贴图,并且要 同时保持画面流畅.“Spri ...

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

    本集合是有一位国外设计师收集整合,并由 oncoding翻译成中文的,感谢他们的辛苦贡献.CSS Sprites技术在国外并不是什么新技术,只不过近两年(尤其08年开始)中国开始流行这个词,大家也开始 ...

  4. 学无止境的CSS(xHTML+CSS技巧教程资源大全)

    本文里面收集一些有关CSS的技巧.教程.工具和观点等,其中一些你也许早就运用的炉火纯青,也可能有的你听都没听说过.不管是新手还是高手,大家都继续学习吧. 一,Web 标准 要玩游戏,就得先了解规则.要 ...

  5. 神奇的CSS sprites,制作特效的新方法

    本文主要内容简译自Dava Shea的英文文章 CSS Sprites: Image Slicing’s Kiss of Death,如果觉得博主讲的含糊不清的话,可以看作者原文. 熟悉了常规切图的我 ...

  6. CSS Sprites ——雪碧图的使用方法

    首先解释下CSS Sprites是什么:有称CSS精灵,有称CSS雪碧的,无论叫什么,他的作用就是把网页上很多小图标放到一张图片里面,然后通过CSS里面的background-position来控制每 ...

  7. CSS Sprites 原理技术介绍及其优化方法

    先期的准备工作 应对一个项目后期维护成本大的问题,我们最好的解决方案就是在开始前制定一系列的规范来限制问题的产品.好的开始是成功的一半.对于CSS Sprites,在项目开始前,我们要充分认识一个产品 ...

  8. css清除浮动大全共8种方法

    原文链接http://www.jb51.net/css/173023.html 清除浮动是每一个 web前台设计师必须掌握的机能.css清除浮动大全,共8种方法. 浮动会使当前标签产生向上浮的效果,同 ...

  9. CSS清除浮动大全的8种方法

    清除浮动是每一个 web前台设计师必须掌握的机能.css清除浮动大全,共8种方法. 浮动会使当前标签产生向上浮的效果,同时会影响到前后标签.父级标签的位置及 width height 属性.而且同样的 ...

随机推荐

  1. Flex各类型坐标转换(全局、本地、内容坐标间转换)

    Flex包含3种坐标:全局坐标.本地坐标.内容坐标 全局坐标:stage级别,坐标原点为舞台的左上角,如MouseEvent的stageX.stageY坐标. 本地坐标:组件级别的坐标系,相对坐标,坐 ...

  2. ORACLE SQL调优案例一则

    收到监控告警日志文件(Alert)的作业发出的告警邮件,表空间TEMPSCM2不能扩展临时段,说明临时表空间已经被用完了,TEMPSCM2表空间不够用了 Dear All:   The Instanc ...

  3. Apache的Order Allow,Deny 详解

    Allow和Deny可以用于apache的conf文件或者.htaccess文件中(配合Directory, Location, Files等),用来控制目录和文件的访问授权. 所以,最常用的是: O ...

  4. C# 多线程,论多核时代爱恨情仇

    为什么要学习多线程? 2010年1月21日是10年某市公务员考试的报名截止日.因从下午2点开始,用于报名的北京市人事考试网瘫痪,原定于昨天下午5点截止的报名时间延迟至今天上午11点. 2011年3月1 ...

  5. CentOS系统在不重启的情况下为虚拟机添加新硬盘

    一.概述 用过虚拟机的都知道,如果在系统运行的时候去给虚拟机添加一块新设备,比如说硬盘,系统是读取不到这个新硬盘的,因为系统在启动的时候会去检测硬件设备.但是我们也可能会遇到这样的情况,比如正在运行比 ...

  6. Vim光标定位

    *定位到指定行n: 输入"nG". 或输入"ngg". 或输入":n" 这里,n就是指定的行的行号.注意,有时候G=gg. *跳到屏幕顶部: ...

  7. Android中在sdcard上创建文件夹

    //在SD卡上创建一个文件夹    public void createSDCardDir(){     if(Environment.MEDIA_MOUNTED.equals(Environment ...

  8. PowerDesigner新装后的设置

    1.设置name不自动等于code 1.1菜单栏选择tools,选择general Options,打开如图1所示界面 1.2选择Dialog,勾掉红框中复选框,点OK即可

  9. KVM 介绍(8):使用 libvirt 迁移 QEMU/KVM 虚机和 Nova 虚机 [Nova Libvirt QEMU/KVM Live Migration]

    学习 KVM 的系列文章: (1)介绍和安装 (2)CPU 和 内存虚拟化 (3)I/O QEMU 全虚拟化和准虚拟化(Para-virtulizaiton) (4)I/O PCI/PCIe设备直接分 ...

  10. 使用jMeter测试Solr服务接口

    之前一直用ab做简单的服务接口测试,ab功能强悍,使用简单,但是没有生成专题图和表格等功能,因此,我们决定使用jmeter来作为我们测试工具.接下来,我们将详细介绍jmeter使用的步骤,主要包括:j ...