病毒安全知识,电脑网络技术,手工杀毒方法,答疑解决笔记

导航

« 个别电脑上不了网——吐血系列之十一position:absolute解决我的布局兼容问题 »

Z-Blog与图片拼合(CSS sprites)

  CSS图片拼合即CSS sprites就是将网站上“多个图片将以一定间距合并为一个大图片文件, 页面中使用这些图片的元素将利用 background-position 这一 CSS 属性来显示拼合图片中的指定位置”,“可有效降低图片文件的 HTTP 连接请求数”,或者说也降低访问网站时的连接请求数,提高网站性能,如果你有使用YSLOW或其它一些网站性能测试工具或测试网站,一般都会给出这样的建议,如果看不懂英文的话,百度统计的网站速度诊断也会有同样的建议:“使用css sprites技术可以减少请求次数”。

  那么如何在网站上实现css sprites呢,推荐使用一个网站工具:CSS 图片拼合生成器,它解决的问题是合并图标,并给出拼合后图片的“坐标”,接着你就可以在CSS样式表中用background-position来引用这些“坐标”定位图标,代替原先使用的一个一个零散的background-image。具体的就不说了,那个网站里也有详细的解释,实在不明白,就看看我的网站css文件与网页代码。我的建议是,可以选用合并成png格式的图片,保持背景透明,这样适用度更高些,不必担心网站上不同的背景色的影响,不过如果图片太大,可以改成gif,还能兼容IE6,转换图片格式时记得去掉“强制黑白”,这样没有黑色锯齿边;图片间距不一定要太大,也不要选得太小,避免显示时把不必要的图标边缘露出来,因为你即使你严格按照“坐标”来布局,还是需要一点点微调,这时间距的大小可能很关键,不希望露出别图标的话,就把图标尽量靠在边上,比图标在显示在右端,就把图标放在图片的左边,这样图标的左侧就不会露出其它的图标干扰布局;如果要让背景图片可以有链接(CSS拼合的一般都是背景图片,当然你可以把前景图片也“挪”成背景图片),只要把背景图片设到<a>链接里;最后麻烦的重复图片(repeat-x、repeat-y),CSS sprites并非不支持重复图片,只是如果拼合在一起的图片如果尺寸不一,就达不到重复的效果,除非把横向和纵向重复的图片另外分别拼合,并且做成宽度(横向重复)或高度(纵向重复)一致,才能避免重复时不出现图片上其它不想让它显示的部分,或者不用重复,直接按长高设成完整的图片,再进行拼合,这样的后果是文件体积变大,不过只要网站不大,文件也大不到哪去。

  至于z-blog这样的网站要不要用CSS sprites又是另一个问题。图片拼合对于那些图片较多的网站确实很有效,能大量减少HTTP请求数,而用z-blog搭建的博客网站,一般情况或者说绝大多数情况下,是不会有大量图片的,反而如果把前景图片变成背景图片,由css样式表文件加载,则有可能会在文章页加载了额外的图片,除非是合并在统一的图片中,不会增加图片的数量,但可能增加图片文件的体积(这也是个问题,合并时是考虑图片的体积还是考虑图片的数量)。

我的CSS sprites图片

  所以我不建议使用zblog类博客网站的站长使用css sprites,至少在你的空间、文章数量、网站速度、访问压力都可以接受的情况下,没必要去做拼合,完全可以忽视那些网站“优化”建议,除非你想象我一样顺便玩玩这个技术,或者真的HTTP请求连接数太多、网站访问流量太大,适当做点调整才是必要的。同时不要忘记CSS sprites的缺点,那就是以后想要调整其中某个图标的话会比较麻烦,那样你要处理的将是整个或者半个网站的图片。


>> 除非说明均为原创,如转载请注明来源于http://www.stormcn.cn/post/1110.html

  • 1楼.摄影工作室
  • 用的不是这个程序,了解一下。
    流风33 于 2011-9-30 16:34:51 回复
    不管是哪个程序,css sprites对网站来说是通用的

  • 2011-9-30 11:15:10  [引用]
  • 2楼.杨大叔
  • 这个真的好用吗?
    流风33 于 2011-10-3 20:22:51 回复
    减少HTTP请求数总是有用的,至少有多少用,看不同网站了

  • 2011-10-3 19:18:39  [引用]

发表评论(无须注册,所有评论在审核通过后显示):

◎欢迎参与讨论,请在这里发表您的看法、交流您的观点。

  • 微信订阅号
    微信订阅

最新发表

最新评论及回复

本站出现的所有广告均不代表本人及本站观点立场 | 关于我 | 网站地图 | 联系邮箱 | 返回顶部
Copyright 2008-2020 www.stormcn.cn. All Rights Reserved. Powered By Z-Blog. 闽ICP备09000343号

闽公网安备 35010202000133号