CSS Sprites详解

2021-03-12 09:45 jianzhan
CSS Sprites技术性不新鮮,早在2005年 CSS Zengarden 的园主 Dave Shea 就在 ALA 发布对该技术性的 详尽论述 。本来只在CSS玩家之间做为1种制做方式流传,后来出来个 14 Rules for Faster-Loading Web Sites , 技术性人员之间争相传阅,在其中第1条标准Make Fewer HTTP Requests就提到CSS Sprites。因而这个小妖精就火了起来,乃至出現了线上转化成专用工具,势不能挡也。近来中国许多blog都提到CSS Sprites,最知名的事例莫过度 http://www.google.co.kr/ 正下方的那几个动漫。全新公布的YUI中,也是应用到CSS Sprites,基本上都有的CSS装饰设计图都被1个 40×2000的图 包办代替。社交媒体大站Facebook近期也应用了1个 22×1150的照片 担负了全部icon.1時间,CSS Sprites无处不在。
基本原理
大家了解,自CSS改革以降,HTML趋向于词义化,在1般状况下已不在标识里写装饰设计性的內容而是把展现的每日任务交到了CSS。GUI是缤纷多彩的,少不上各种各样好看的图来点缀。新时期的生产制造方法是,在HTML布满各种各样各种各样的钩子(hook),随后交由CSS来解决。在必须用到照片的情况下,目前是根据CSS特性background-image组成background-repeat, background-position等来完成(题外话:为什么我提目前,由于将来访问器若适用content则又新增此外的完成方式)。大家的主角是,你1定猜到了,便是background-position。根据调剂background-position的标值,情况照片就可以以不一样的外貌出現在你眼下。实际上照片总体外貌沒有变,因为照片部位的更改,你看到只该看到的罢了。就如同手表上的时间,你今日看到是21,明日看到是22,是由于它的position往上跳了1格。因此你也大约掌握到,CSS Sprites1般只能应用到固定不动尺寸的盒子(box)里,这样才可以够遮挡住不可该看到的一部分。

大家应用YUI的sprite.png举个事例,倘若大家有这么1段编码,max意味着最大化,min意味着最少化,大家必须给它们配上相应的好看照片(这样大家的网站才可以够吸引住人,才能够卖钱,才能够到佛罗里达晒太阳:D):

<div class="max">最大化</div>
<div class="min">最少化</div>

这两个class都应用同1个照片:

拷贝编码
编码以下:

.min, max {
width:16px;
height:16px;
background-image:url(http://developer.yahoo.com/yui/build/assets/skins/sam/sprite.png);
background-repeat: no-repeat; //大家其实不想让它平铺
text-indent:⑼99em; //掩藏文字的1种方式
}

实际效果以下:

最大化最少化
最大化最少化
大家看到1团灰,没错,由于大家都还没特定background-position,默认设置为 0 0,能够看下 sprite.png , 处在这个部位更是灰块。好了,大家要寻找意味着最大化的加号和意味着最少化的减号的部位找出来。历经精确测量,最大化按钮坐落于Y轴的350px处,最少化按钮坐落于Y轴400px处。想想大家怎样才可以让它们可以显示信息出来呢,显著,要向上提高sprite.png,获得编码以下:

拷贝编码
编码以下:

.max {
background-position: 0 ⑶50px;
}
.min {
background-position: 0 ⑷00px;
}

耶,大家取得成功了:
最大化最少化
留意:以便举例的便捷,本事例立即在HTML内嵌款式,切勿在实践活动中的非独特状况应用这类方法)。

优势

大家从前面掌握到,CSS Sprites为何忽然跑火,跟可以提高网站特性相关。不言而喻,这是它的极大优势之1。一般制做方法下的很多照片,如今合拼成1个照片,大大降低了HTTP的联接数。HTTP联接数对网站的载入特性有关键危害。

缺陷

至于可维护保养性,这是1般双刃剑。将会有人喜爱,有人不喜爱,由于每次的照片修改都得往这个照片删掉或加上內容,显得略微繁琐。并且算照片的部位(特别是这类上千px的图)也是1件甚为不爽的事儿。自然,在特性的标语下,这些全是能够摆脱的。

因为照片的部位必须固定不动为某个肯定标值,这就丧失了诸如center之类的灵便性。

前面大家也提到了,务必限定盒子的尺寸才可以应用CSS Sprites,不然将会会出現出現影响照片的状况。这便是说,在1些必须非单边的平铺情况和必须网页页面放缩的状况下,CSS Sprites其实不适合。YUI的处理方法是,加大照片之间的间距,这样能够维持比较有限度的放缩。

总结

特性压倒1切。CSS Sprites是值得营销推广的1种技术性。特别适合用于FIR,例如固定不动尺寸的icon更换。为维持适配性,照片中的各个一部分维持1定的间距是1种非常好的做法。