- 浏览: 1578795 次
- 性别:
- 来自: 北京
文章分类
最新评论
-
nich002:
原网站失效了。撸主简单粗暴的复制过来,可读性极差!差评!
Apache配置详解(最好的APACHE配置教程) -
107x:
不错,谢谢!
LINUX下查看文件夹下的文件个数! -
Hypereo:
好你妹,连个格式都没有!
Apache配置详解(最好的APACHE配置教程) -
resteater:
代码排版感觉有点乱!收发信息代码可读性不强!请问第一次发服务器 ...
java socket例子 -
resteater:
代码排版感觉有点乱!收发信息代码可读性不强!请问第一次发服务器 ...
java socket例子
最初知道是因为google calendar,而且一直不知道其名称,下面的文章可以让我们系统的了解这项技术。
--------------------------------------------------------------
From: http://www.52css.com/article.asp?id=735
CSS Sprites对CSS布局的意义、优点和缺点介绍
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,最著名的例子莫过于 google.co.kr 下方的那几个动画。最新发布的YUI中,也是使用到CSS Sprites,几乎都有的CSS装饰图都被一个40×2000的图包办。社交大站Facebook最近也使用了一个22×1150的图片承担了所有icon。一时间,CSS Sprites无处不在。
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代表最小化,我们需要给它们配上相应的漂亮图片(这样我们的网站才能够吸引人):
<div class="min">最小化</div>
这两个class都使用同一个图片:
width:16px;
height:16px;
background-image:url(sprite.png);
background-repeat: no-repeat; /*我们并不想让它平铺*/
text-indent:-999em; /*隐藏文本的一种方法*/
}
效果如下:
[ 可先修改部分代码 再运行查看效果 ]
我们看到一团灰,没错,因为我们还没有指定background-position,默认为 0 0,可以看下sprite.png,处于这个位置正是灰块。好了,我们要找到代表最大化的加号和代表最小化的减号的位置找出来。经过测量,最大化按钮位于Y轴的350px处,最小化按钮位于Y轴400px处。想一想我们如何才能让它们能够显示出来呢,明显,要向上提升sprite.png,得到代码如下:
.min { background-position: 0 -400px;}
再次查看效果:
[ 可先修改部分代码 再运行查看效果 ]
这一次我们成功了!
CSS Sprites优点
我们从前面了解到,CSS Sprites为什么突然跑火,跟能够提升网站性能有关。显而易见,这是它的巨大优点之一。普通制作方式下的大量图片,现在合并成一个图片,大大减少了HTTP的连接数。HTTP连接数对网站的加载性能有重要影响。
CSS Sprites缺点
至于可维护性,这是一般双刃剑。可能有人喜欢,有人不喜欢,因为每次的图片改动都得往这个图片删除或添加内容,显得稍微繁琐。而且算图片的位置(尤其是这种上千px的图)也是一件颇为不爽的事情。当然,在性能的口号下,这些都是可以克服的。
由于图片的位置需要固定为某个绝对数值,这就失去了诸如center之类的灵活性。
前面我们也提到了,必须限制盒子的大小才能使用CSS Sprites,否则可能会出现出现干扰图片的情况。这就是说,在一些需要非单向的平铺背景和需要网页缩放的情况下,CSS Sprites并不合适。YUI的解决方式是,加大图片之间的距离,这样可以保持有限度的缩放。
CSS Sprites总结
性能压倒一切。CSS Sprites是值得推广的一种技术。尤其适宜用于FIR,比如固定大小的icon替换。为保持兼容性,图片中的各个部分保持一定的距离是一种不错的做法。
评论
浅谈CSS Sprites技术以及图片优化
http://www.52css.com/article.asp?id=869
CSS Sprites技术早在2005年 CSS Zengarden 的园主 Dave Shea就在ALA发表对该技术的详细阐述。
http://www.52css.com/article.asp?id=735
关于CSS Sprites技术的优化我们能做到多少,能减多少的请求数量。这并且不是单方面能做到的,一切取决于XHTML、CSS、CSS Sprites图片之间的配合。现时为止没有绝对优化的做法,这也是我在项目中经常衡量CSS Sprites图片与XHTML关系,如:《一张背景实现自适应九宫格》,以下总结了图片切割术与图象优化的一些方法。
图片优化
一、对于非动画的GIF更建议使用PNG8因为它同样能做到一样的效果,而且能为你节省10%-30%的文件体积。
二、Photoshop相比起Fireworks,导出同等质量的PNG图片,体积会稍大。而Fireworks虽然做了相应压缩优化,但没有达到最优秀的压缩。
三、我所知的设计软件,对于PNG图片的处理都没做到最优秀的压缩,图片体积还有一定的压缩空间。可以尝试使用下面介绍的”图像优化工具” 做无失真的压缩优化。
四、图片体积及尺寸方面,建议体积保持在100K以内(较为符合国情最佳请求SIZE),size为800px(最佳尺寸)。(从某权威人事中得知,具体无从考证)
CSS Sprites图片切割术
一、CSS Sprites图片顺序合图片由上至下、左至右添加。而background-position一般采用数字组合形式定位,这样能减少维护带来的不必要麻烦。
二、不建议CSS Sprites图片中保持一定的间距,因为文件size增大而增加文件体积。
三、CSS Sprites图片中把颜色较近或相同的组合在一起可以降低颜色数,因为少色数的图片文件体积会相对的小。
四、size相同的CSS Sprites图片中留有较大空隙,某程度上多数情况会增大了体积,所以CSS Sprites的图片不要有空隙。
五、在size相同的CSS Sprites图片中,垂直排列的图片会比水平排列的文件体积要大。
六、在CSS Sprites图片中,水平排列的图片会比垂直排列的文件体积要大。
七、图片对等合并:应用CSS Sprites图片时,适当地把对等相同的图像合并,以节省空间及减少体积。
八、区分开不需要合并的图像:如当前用户确定只显示一种状态或一个级别时,不必要把其他的级别或状态的图片合并。
九、黄金切割位:在CSS Sprites图片的最右或左边为最灵活动位置最适宜摆放文本前的icon,因此不会受到其它CSS Sprites图片干预,也不需要预留一定的行宽。
相关的图像优化工具
网上流传的优化工具繁多常见的如:
ImageMagick、PNGGauntlet、pngcrush、pngrewrite、Optipng、PNGOut等。
发表评论
-
几个不错的ff下调试插件
2009-12-11 11:14 1854记录一下经常使用的ff插件,其中firebug、switchh ... -
20 种提升网页速度的技巧
2009-04-15 20:19 1250From:http://www.ibm.com/develop ... -
25 个在 Web 中嵌入图表的免费资源
2009-04-14 21:27 1662From: http://www.cnbeta.com/art ... -
15个网站用户体验优化禁忌
2009-04-08 22:57 1173From:http://www.blueidea.com/de ... -
让IE8兼容IE7
2009-03-27 15:10 4222今天在搜狐首页发现:<meta http-equiv ... -
FF下分析页面加载的工具
2009-03-25 16:03 2471今天同事推荐YSlow作为 ... -
IE6下页面显示空白的问题
2009-03-24 17:01 5302今天又碰到了一个页面在IE6下加载完后一片空白的问题,而且页面 ... -
支持IE6、IE7的关闭页面的函数
2009-03-17 15:40 1694function closeWin() { var isI ... -
很弱很无奈的一段代码(打开的页面更新父窗口的链接)
2009-03-12 11:51 1016if(parent.window.opener) { pa ... -
js小脚本
2009-02-26 10:13 1543清除元素: var clearNode = functio ... -
处理一次性事件的模式
2009-02-12 20:20 1244有的时候我们需要给一个标签增加一次性的事件,比如先在输入框中增 ... -
Linux:rsync服务器的快速搭建和使用
2008-12-30 10:15 1324From: http://tech.ddvip.com/200 ... -
js导致的页面空白问题
2008-12-29 13:45 3140今天遇到一个很奇怪的问题,系统的一个页面在一台机器上无法完全展 ... -
IE6下history.back无效的问题
2008-12-26 23:56 3792解决IE6中history.back()无法返回的问题:< ... -
浏览器兼容比较好的设置min-width的方式
2008-12-12 18:45 2539<!DOCTYPE HTML PUBLIC " ... -
CSS代码分享:浏览器CSS Reset方法十例zz
2008-12-07 18:06 1158From: http://www.52css.com/arti ... -
在Javascript中,什么是闭包(Closure)
2008-12-02 11:11 1038from: http://javascript.chinaht ... -
Unicode、GB2312、GBK和GB18030中的汉字[转]
2008-11-25 15:22 3845From: http://blog.csdn.net/fmdd ... -
空字符串的split
2008-11-21 19:16 1562本来以为是零,但是在java和js里试了以后发现居然都是1,很 ... -
docType 相关的loose.dtd导致的无法获取scrollTop的解决
2008-11-19 11:32 1665function iecompattest(){ retu ...
相关推荐
CSS Sprites的工作原理是将这些小图整合到一张大图中,只用一个HTTP请求获取这张大图,然后通过改变元素的`background-position`属性来显示大图中的不同部分。 例如,假设我们有一个大图`sprite.png`,包含了“最大...
CSS Sprites的主要原理是利用CSS的背景定位功能,通过改变元素的背景位置来显示所需的部分图像。 **工具详解** "CSS Sprites生成工具"是一种专门用于自动化这个过程的软件。例如,CSS Satyr v1.2.exe 是这样一个...
### 一、CSS Sprites的基本原理 1. **图片合并**:首先,将网页中需要用到的小图标或背景图片合并到一张大图中,这一步通常在图像编辑软件如Photoshop中完成。 2. **CSS定位**:在CSS样式中,通过设置`background-...
### CSS Sprites技术详解 #### 一、CSS Sprites技术简介 CSS Sprites技术是一种将多个小图片合并成一张大图的技术,通过CSS背景定位来显示所需的特定小图部分。这种技术可以显著减少HTTP请求次数,提高网页加载...
5. **工具支持**:有许多在线工具和自动化库可以帮助生成和管理CSS Sprites,例如SpritePad、CSS Sprite Generator和Compass框架的Sprite Mix插件。这些工具可以自动合并图像并生成相应的CSS代码,简化了开发过程。 ...
**CSS Sprites 知识详解** CSS Sprites是一种网页图像处理技术,用于优化网页加载速度,减少HTTP请求的数量。在网页设计中,如果一个页面上有多个小图标或背景图像,传统方式是每个图像都单独请求,这会增加页面...
程序名称:CSS Sprites 样式生成工具(bg2css) 主要功能:方便使用CSS Sprites时对图片生成样式 安装条件:需先安装Adobe的AIR环境AdobeAIRInstaller.exe,这个我也传到csdn空间了,可以搜索下!
**CSS Sprites 技巧详解** CSS Sprites是一种网页图像优化技术,源于计算机图形学中的精灵技术,旨在减少网络请求次数,提升网页加载速度。它将多个小图像整合到一张大图(称为Sprite图)中,然后利用CSS背景定位来...
**CSS Sprites 的工作原理** 1. **合并图像**:首先,开发者将网页中需要用到的所有小图像整合到一张大的图像文件中,每个小图占据大图中的一个特定位置。 2. **CSS定位**:然后,利用CSS的`background-image`属性...
**一、CSS Sprites工作原理** 1. **合并图像**:首先,你需要将网站上所有需要的背景图像合并成一张大图,这张大图就是精灵图。通常,这些图像都是静态的、不经常变动的小图标或者按钮。 2. **坐标定位**:然后,...
**CSS精灵(CSS Sprites)**是一种网页图像优化技术,它允许我们将多个小图像合并到一个大图(称为精灵图)中,然后通过CSS的背景定位来显示我们需要的部分。这样可以减少网页HTTP请求的数量,从而提高页面加载速度...
**CSS Sprites的工作原理** 1. **图像合并**:首先,你需要将网页中所有的小图标或者背景图片合并到一张大图中,通常这一步会使用专门的CSS Sprites生成工具,如标题中提到的工具,它可以自动帮你完成这个过程。 2...
CSS Sprites在国内很多人叫css精灵,是一种网页图片应用处理方式。它允许你将一个页面涉及到的所有零星图片都包含到一张大图中去,这样一来,当访问该页面时,载入的图片就不会像以前那样一幅一幅地慢慢显示出来了。
CSS Sprites 样式生成工具(bg2css) 3.2.1 (需要AIR环境,可到 Adobe站点 下载安装。)
css Sprites精灵图制作。加快网页加载速度 浏览器接受的同时请求数是10个,如果图片过多会影响整体的视觉效果,而且对于不稳定的网络带宽,加载起来更是噩梦,所以把图片拼接为一张大图,从而加快加载速度,以及...
**CSS Sprites 的工作原理** 1. **合并图像**:首先,你需要将网页中所有分散的小图标和背景图片合并成一张大图,这通常被称为“精灵图”。 2. **设置CSS**:然后,使用CSS来定义元素的背景图像,并通过`...
一、CSS Sprites基本原理 1. 图片合并:首先,你需要将网页中所有的小图标或背景图片整合到一张大图中。这一步通常在设计阶段完成,通过图像编辑工具如Photoshop或者在线工具实现。 2. CSS定位:然后,为每个原本...
对于前端开发者来说,掌握CSS Sprites的使用和相关工具的操作是提高工作效率的重要技能之一。 在使用CSS Satyr时,需要注意以下几点: - **图片尺寸**:为了获得最佳效果,应确保合并的图片大小相近,避免大图和小...
#### 二、CSS Sprites 的工作原理 1. **图像拼合**:首先,需要将多个小图像拼合成一张大图像,这张大图像被称为**Sprites图像**。 2. **CSS背景定位**:接着,通过CSS的`background-position`属性来确定所需显示的...
为您提供CSS Sprites Generator CSS Sprites生成工具下载,CSS Sprites Generator是一款CSS Sprites生成工具,用户只需要点击几下鼠标就可以非常容易地生成CSS Sprites。有效提高了设计师的页面加载效率,操作简单...