CSS Sprites
作者:Realazy 来源:Realazy 发布时间:2007-10-10 13:21:00
CSS Sprites技术不新鲜,早在2005年 CSS Zengarden 的园主 Dave Shea 就在 ALA 发表对该技术的 详细阐述 。原先只在CSS玩家之间作为一种制作方法流传,后来出来个 14 Rules for Faster-Loading Web Sites , 技术人员之间竞相传阅,其中第一条规则Make Fewer HTTP Requests就提到CSS Sprites。
于是这个小妖精就火了起来,甚至出现了在线生成工具,势不可挡也。近来国内很多blog都提到CSS Sprites,最著名的例子莫过于 http://www.google.co.kr/ 下方的那几个动画。最新发布的YUI中,也是使用到CSS Sprites,几乎都有的CSS装饰图都被一个 40×2000的图 包办。社交大站Facebook最近也使用了一个 22×1150的图片 承担了所有icon.一时间,CSS Sprites无处不在。
原理
我们知道,自CSS革命以降,HTML倾向于语义化,在一般情况下不再在标记里写装饰性的内容而是把呈现的任务交给了CSS。GUI是缤纷多彩的,少不了各种漂亮的图来装点。新时代的生产方式是,在HTML布满各种各样的钩子(hook),然后交由CSS来处理。在需要用到图片的时候,现阶段是通过CSS属性background-image组合background-repeat, background-position等来实现(题外话:为何我提现阶段,因为未来浏览器若支持content则又新增另外的实现方法)。我们的主角是,你一定猜到了,就是background-position。通过调整background-position的数值,背景图片就能以不同的面貌出现在你眼前。其实图片整体面貌没有变,由于图片位置的改变,你看到只该看到的而已。就好比手表上的日期,你今天看到是21,明天看到是22,是因为它的position往上跳了一格。所以你也大概了解到,CSS Sprites一般只能使用到固定大小的盒子(box)里,这样才能够遮挡住不应该看到的部分。
我们使用YUI的sprite.png举个例子,假如我们有这么一段代码,max代表最大化,min代表最小化,我们需要给它们配上相应的漂亮图片(这样我们的网站才能够吸引人,才可以卖钱,才可以到佛罗里达晒太阳:D):
<div class="max">最大化</div>
<div class="min">最小化</div>
这两个class都使用同一个图片:
.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:-999em; //隐藏文本的一种方法
}
效果如下:
最大化最小化
最大化最小化
我们看到一团灰,没错,因为我们还没有指定background-position,默认为 0 0,可以看下 sprite.png , 处于这个位置正是灰块。好了,我们要找到代表最大化的加号和代表最小化的减号的位置找出来。经过测量,最大化按钮位于Y轴的350px处,最小化按钮位于Y轴400px处。想一想我们如何才能让它们能够显示出来呢,明显,要向上提升sprite.png,得到代码如下:
.max {
background-position: 0 -350px;
}
.min {
background-position: 0 -400px;
}
耶,我们成功了:
最大化最小化
(注意:为了举例的方便,本例子直接在HTML内置样式,切勿在实践中的非特殊情况使用这种方式)。
优点
我们从前面了解到,CSS Sprites为什么突然跑火,跟能够提升网站性能有关。显而易见,这是它的巨大优点之一。普通制作方式下的大量图片,现在合并成一个图片,大大减少了HTTP的连接数。HTTP连接数对网站的加载性能有重要影响。
缺点
至于可维护性,这是一般 * 剑。可能有人喜欢,有人不喜欢,因为每次的图片改动都得往这个图片删除或添加内容,显得稍微繁琐。而且算图片的位置(尤其是这种上千px的图)也是一件颇为不爽的事情。当然,在性能的口号下,这些都是可以克服的。
由于图片的位置需要固定为某个绝对数值,这就失去了诸如center之类的灵活性。
前面我们也提到了,必须限制盒子的大小才能使用CSS Sprites,否则可能会出现出现干扰图片的情况。这就是说,在一些需要非单向的平铺背景和需要网页缩放的情况下,CSS Sprites并不合适。YUI的解决方式是,加大图片之间的距离,这样可以保持有限度的缩放。
总结
性能压倒一切。CSS Sprites是值得推广的一种技术。尤其适宜用于FIR,比如固定大小的icon替换。为保持兼容性,图片中的各个部分保持一定的距离是一种不错的做法。
推荐阅读:
猜你喜欢
- 前言相信大家应该都有所体会,在目前的软件项目中,都会较多的使用到对文档的操作,用于记录和统计相关业务信息。由于系统自身提供了对文档的相关操作
- 一行拆分成多行1.根据某一列拆分效果:代码:if __name__ == '__main__':
- 本文实例讲述了Sanic框架异常处理与中间件操作。分享给大家供大家参考,具体如下:简介Sanic是一个类似Flask的Python 3.5+
- 本文实例讲述了php mailer类调用远程SMTP服务器发送邮件实现方法。分享给大家供大家参考,具体如下:php mailer 是一款很好
- Python字符串介绍字符串是一系列字符。在 Python 中,引号内的任何内容都是字符串。您可以使用单引号或双引号。例如:message
- 问题:最新在爬取某站点的时候,发现在post请求当中,参数构造正确却获取不到数据,索性将post的参数urlencode之后放到post请求
- 一、安装go get github.com/sirupsen/logrus二、使用1、当做标准库使用logrus实现了标准库log的方法,可
- 在用Pycharm运行项目时,不知道干了什么,导致运行后无法像平时那样显示输出结果:最后试了很多种方法,终于解决了:将打勾的地方去掉,不要运
- 概述最近在一家公司实习,入职第一个大一点的需求是将公司开发的两个winstore app的排名信息进行可视化。大概挑选了下,排除了Flask
- 当你执行大型程序的时候,突然出现exception,会让程序直接停止,这种对服务器自动程序很不友好,而python有着较好的异常捕获机制,不
- 测试结果: 整个买票流程可以再快一点,不过为了稳定起见,有些地方等待了一些时间完整程序,拿去可用 整个程序分了三个模块:购票模块(
- 假设在python中有一字典如下:x={‘a':'1,2,3', ‘b':'2,3,4'}需
- 导语昨天下班,回家吃完饭就直接躺了,无聊的时候大家都会干什么呢?当然是刷刷刷——抖音啦,嗯哼,然后返现了抖音上一款特效——「变身漫画」,简直
- 句柄(handle)是C++程序设计中经常提及的一个术语。它并不是一种具体的、固定不变的数据类型或实体,而是代表了程序设计中的一个广义的概念
- vscode检测到#include错误,请更新includePath。解决方法最近电脑重做,重新安装了一边vscode,但是写代码的时候发现
- 前言首先回顾一下什么是事务,事务是数据库操作的最小工作单元,是作为单个逻辑工作单元执行的一系列操作;这些操作作为一个整体一起向系统提交,要么
- 1.使用open()函数打开文件夹在读取一个文件的内容之前,需要先打开这个文件。在Python程序中可以通过内置函数open()来打开一个文
- 目录Python图片验证码降噪 和8邻域降噪一、简介二、8邻域降噪三、Pillow实现四、OpenCV实现Python图片验证码降噪 和8邻
- 在神经网络入门回顾(感知器、多层感知器)中整理了关于感知器和多层感知器的理论,这里实现关于与门、与非门、或门、异或门的代码,以便对感知器有更
- 本文介绍urllib库在不同版本的Python中的变动,并以Python3.X讲解urllib库的相关用法。urllib库对照速查表Pyth