多个图标集于一张背景图片在网页上显示指定区域
作者:wang 日期:2011-11-28
多个图标集于一张背景图片在网页上显示指定区域
早就发现了。。很多大一点的门户里面用的一些背景图都是一个页面只有一张背景图。。所有要用的图标全都放到一张图里面。开始想应该是用位置来控制的，但自己在做网页的时候位置太难调了一直没去实现。。今天在网上找了下，总算找到了篇写这个的文章
文章一：
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）：
最大化
最小化
这两个
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替换。为保持兼容性，图片中的各个部分保持一定的距离是一种不错的做法。
文章二：
本文是我的一点研究心得，跟大家分享一下。不过我也是新人，所以，说得不对的地方，一定请大家谅解。
现在的网站，内容在采集工具的帮助下，实在是不成问题了，那么什么让看到网站的人留下那？或者很多人回答漂亮？其实我个人的感觉是速度。
很多人说，要速度，一定要div＋css，其实也不全都如此。个人感觉，速度跟很多因素都有关系，比如全站图片，代码优化、css太长，也会导致速度很慢。有点跑题了。
平时我写css代码，一般来说，一个大站点，我都会写几个css来调用。比如首页可能会调用2－3个css。其中有通用部分，也有不通用的部分，这样会让css读取效率提高。本地测试，css文件代码超过1000行，定义class或者id数量超过400个的一个css打开载入页面时间是2－3个css代码不超过500行的css文件速度的2倍左右。所以，通常我会用几个css来让网站调用。
又跑题了。
下面说下如何让一个背景图片全站通用。以yahoo.com为例子（注意，是英文的yahoo，不是中文的）。英文yahoo的编写代码不太规范，但是很多大胆的尝试都不错。
仔细分析他们的代码，全站背景图片其实就是2个，1个是1象素700长的，另外一个是4象素4300长度的。grd-4px.gif跟grd-1px.gif（因为高度太长，我就不在这里贴出来了）。全站通用一个背景图片，是提高速度的很大因素。这一个背景，可能是不同的位置不同的颜色样子，合成的一个但是可以在不同的位置调用。
以动易来说，如果要仿yahoo的页面非常容易。通用css可以这样分类：
1、标题背景
2、css表格通用背景
3、内容背景
4、站内外搜索背景
那么，如何定义呢？使用以下CSS定义即可：
background-image:url(/Lectures/UploadFiles_3793/200612/20061210101340854.gif);
background-repeat:repeat-x;
background-position:0 -530px;
注意最后一个定义，这个是通用一个背景图片的关键，就是调用背景图片的不同位置作为背景……
比如：定义“background-position:0 -530px;”，调用这个背景图片530px高度部分作为背景，从最左边开始铺垫。
附：背景(Backgrounds)的属性：
background-color:#f00;
background-image:url(background.gif);
background-repeat:no-repeat;
background-attachment:fixed;
background-position:0 0;
可以缩写为一句：background:#f00 url(background.gif) no-repeat fixed 0 0;
语法是background:color image repeat attachment position;
您可以省略其中一个或多个属性值，如果省略，该属性值将用浏览器默认值，默认值为：
color: transparent
image: none
repeat: repeat
attachment: scroll
position: 0% 0%
这就是yahoo页面上面最与众不同的地方，纵观国内门户网站、网易、qq新郎搜狐都没有如此大胆的尝试。yahoo的页面代码很负责，并且通用了一个css，还有部分css定义是放在页面上面的，不知道是为了防止 css 偷学还是其他含义。的确，全部分析下来很难，因为同一个.ht的定义，居然分了8个部分才定义完所有属性。css里面几部分，页面里面居然还有……
yahoo跟msn的英文页面是类似的，msn的英文页面还好一些，大家也可以分析一下看看。但是yahoo的英文页面，如果真的学会了，相信对大家理解css以及div的感觉以及水平，会有很大的提高。
我真的是个新手，接触divcss 时间才3个月。。接触动易2个月而已。
－－－－－－－－－－－－－－－－－－－－－－－－－－
简约、洁净，似乎是目前门户站点开始流行的一种页面风格，不同的蓝色铺垫出来的，yahoo这个页面，是可以在动易仿制出来的。页面解析速度满快。图片我发到交流板块去了，有兴趣您可以去看看。
看了很多大家的帖子，常常不知道问题解决答案了就开始问，可是看看问的问题，实在很难让别人回答你，不是太难，而是实在太简单。这里很多高手相信不是喜欢作普及教师的，因此，很多时候不如常常自学一下，然后多多搜索一下吧……
每个人都不是笨笨的。分享给大家我学div 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，最著名的例子莫过于 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）：
最大化
最小化
这两个
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替换。为保持兼容性，图片中的各个部分保持一定的距离是一种不错的做法。
文章二：
本文是我的一点研究心得，跟大家分享一下。不过我也是新人，所以，说得不对的地方，一定请大家谅解。
现在的网站，内容在采集工具的帮助下，实在是不成问题了，那么什么让看到网站的人留下那？或者很多人回答漂亮？其实我个人的感觉是速度。
很多人说，要速度，一定要div＋css，其实也不全都如此。个人感觉，速度跟很多因素都有关系，比如全站图片，代码优化、css太长，也会导致速度很慢。有点跑题了。
平时我写css代码，一般来说，一个大站点，我都会写几个css来调用。比如首页可能会调用2－3个css。其中有通用部分，也有不通用的部分，这样会让css读取效率提高。本地测试，css文件代码超过1000行，定义class或者id数量超过400个的一个css打开载入页面时间是2－3个css代码不超过500行的css文件速度的2倍左右。所以，通常我会用几个css来让网站调用。
又跑题了。
下面说下如何让一个背景图片全站通用。以yahoo.com为例子（注意，是英文的yahoo，不是中文的）。英文yahoo的编写代码不太规范，但是很多大胆的尝试都不错。
仔细分析他们的代码，全站背景图片其实就是2个，1个是1象素700长的，另外一个是4象素4300长度的。grd-4px.gif跟grd-1px.gif（因为高度太长，我就不在这里贴出来了）。全站通用一个背景图片，是提高速度的很大因素。这一个背景，可能是不同的位置不同的颜色样子，合成的一个但是可以在不同的位置调用。
以动易来说，如果要仿yahoo的页面非常容易。通用css可以这样分类：
1、标题背景
2、css表格通用背景
3、内容背景
4、站内外搜索背景
那么，如何定义呢？使用以下CSS定义即可：
background-image:url(/Lectures/UploadFiles_3793/200612/20061210101340854.gif);
background-repeat:repeat-x;
background-position:0 -530px;
注意最后一个定义，这个是通用一个背景图片的关键，就是调用背景图片的不同位置作为背景……
比如：定义“background-position:0 -530px;”，调用这个背景图片530px高度部分作为背景，从最左边开始铺垫。
附：背景(Backgrounds)的属性：
background-color:#f00;
background-image:url(background.gif);
background-repeat:no-repeat;
background-attachment:fixed;
background-position:0 0;
可以缩写为一句：background:#f00 url(background.gif) no-repeat fixed 0 0;
语法是background:color image repeat attachment position;
您可以省略其中一个或多个属性值，如果省略，该属性值将用浏览器默认值，默认值为：
color: transparent
image: none
repeat: repeat
attachment: scroll
position: 0% 0%
这就是yahoo页面上面最与众不同的地方，纵观国内门户网站、网易、qq新郎搜狐都没有如此大胆的尝试。yahoo的页面代码很负责，并且通用了一个css，还有部分css定义是放在页面上面的，不知道是为了防止 css 偷学还是其他含义。的确，全部分析下来很难，因为同一个.ht的定义，居然分了8个部分才定义完所有属性。css里面几部分，页面里面居然还有……
yahoo跟msn的英文页面是类似的，msn的英文页面还好一些，大家也可以分析一下看看。但是yahoo的英文页面，如果真的学会了，相信对大家理解css以及div的感觉以及水平，会有很大的提高。
我真的是个新手，接触divcss 时间才3个月。。接触动易2个月而已。
－－－－－－－－－－－－－－－－－－－－－－－－－－
简约、洁净，似乎是目前门户站点开始流行的一种页面风格，不同的蓝色铺垫出来的，yahoo这个页面，是可以在动易仿制出来的。页面解析速度满快。图片我发到交流板块去了，有兴趣您可以去看看。
看了很多大家的帖子，常常不知道问题解决答案了就开始问，可是看看问的问题，实在很难让别人回答你，不是太难，而是实在太简单。这里很多高手相信不是喜欢作普及教师的，因此，很多时候不如常常自学一下，然后多多搜索一下吧……
每个人都不是笨笨的。分享给大家我学div css的一些心得，希望对大家有所帮助。
－－－－－－－－－－－－－－－－－－－－－－－－－－
上一篇: 
下一篇: 
文章来自: 
引用通告: 
Tags: 
相关日志:
评论: 0 | 引用: 0 | 查看次数: 7005
发表评论
