注册 登录  
 加关注
   显示下一条  |  关闭
温馨提示!由于新浪微博认证机制调整,您的新浪微博帐号绑定已过期,请重新绑定!立即重新绑定新浪微博》  |  关闭

左岸

web前端

 
 
 

日志

 
 

CSS Sprites,如何来规划?  

2014-02-11 15:31:34|  分类: css |  标签: |举报 |字号 订阅

  下载LOFTER 我的照片书  |

先看一张图:

CSS Sprites,如何来规划? - sssxiaoliya - 左岸


一个页面一般会加载多少张css背景图?
一般会有哪几种类型的雪碧图?
雪碧图的尺寸该设置多大?如何排列?
雪碧图在站点中如何分布?

是否曾经烦恼过以上几点问题?带着上面几点问题,我们一起来探讨站点的雪碧图该如何规划比较合理。

首先让我们回忆一下,以前切页面时,会用到哪些类型的素材图?

我努力的想…努力的想啊…大概有:按钮、图标、其它固定尺寸背景图、横竖平铺背景图、横铺背景图、竖铺背景图、左右自适应背景图、上下自适应背景图、颜色鲜艳且尺寸较大的背景图。

好像有点乱,让我们分下类。

按雪碧图使用的作用域可分为:跨项目通用、全局、栏目级、页面级

按雪碧图实现方式可分为:固定尺寸雪碧图、横铺雪碧图、竖铺雪碧图(比较少用)、横竖平铺背景图(比较少用)

 那么,再把我们回想的素材图归下类:

按作用域:这些素材在不同站点都有可能出现在不同作用域中

按实现方式:


固定尺寸雪碧图:按钮、图标、其它固定尺寸背景图、颜色鲜艳且尺寸较大的背景图
横铺雪碧图:横铺背景图、左右自适应背景图(不使用九宫格的实现方式)
竖铺雪碧图:竖铺背景图、上下自适应背景图(不使用九宫格的实现方式)
横竖平铺背景图:这种图不能合成雪碧图,一般用于网页背景花纹,大部分站点比较少出现

最后,从站点的可实现性上考虑,我们该做多少张雪碧图?请看下面这张表:

CSS Sprites,如何来规划? - sssxiaoliya - 左岸

从表中可以分析出,一个页面的背景图的请求数为:

CSS Sprites,如何来规划? - sssxiaoliya - 左岸

看到最最多的情况,是不是震惊了?呵呵,其实很少会发生全部用的情况,根据页面实际情况组合使用,请求的个数不会很多,跟第一张图例的背景图请求数相比,规划清晰很多,请求数也减少很多了。

这些图该如何切、如何分布、命名,有没什么讲究?以下是我个人的观点和建议:


 横铺图宽度使用20px, 使用1px宽度横铺会有渲染性能问题,竖铺同理。我就不详细说明了,网上搜索,有相关示例。
固定尺寸的雪碧图一般可设定为宽度是网页宽度的一半,高度随图片内容增长。因为切图前你可能不确定用多大尺寸,我的见解是,到切图后期你可能不需要单独用一张repeat-x.png的图放左右自适应的背景图,多数情况我们会用2个标签采用滑动门的方式实现左右自适应的背景,而页面宽度的一半即可实现最大宽度的左右自适应背景,那么这时你可以把左右自适应的背景放进这张雪碧图中了
拼合图片时固定尺寸的图与图之间相隔1像素,避免浏览器放大时,尺寸多计算1像素时可见到临近的图片
栏目级雪碧图的名称按栏目级目录名命名,页面级雪碧图的名称按页面名称命名,组件类和皮肤类雪碧图同理,其它的可按表中的名称命名,这样方便区分和后期管理
跨项目通用的组件或某个组件的图片内容较多、修改频繁,可以独立出一张组件图,按组件名命名,方便管理
如果站点的全局图标比较多,可以考虑将图标单独做一张雪碧图
建议图标使用一个新标签实现,而不是直接用有内容的那个标签设定图标背景,这样你需要给雪碧图图标与图标之间多留一些间距,另外遇到不同行高的时候,为了让图标背景垂直啵砥命名,组件类和皮肤类雪碧蛅骯-'DENT: 2em;" >大家对便区分和、如有嵊袖含规图图和看法"ht队粞晕颐且湟灰韵率

先看襬g ztag">

dI n>

bcmstyl2" title=ndDownLbcccccbccccc/

nbc-0T: c-0-40 pb-mt pb-mt- <评论1像ht pnt og ztag">
nbc-0T: c-0-40 pb-mi og ztag"> nbc-0T: c-0-40 pb-m;" 转发至reBtht pnt og ztag">

t">

ration:none;" targehttp://blpb-j07 ztiv class="ttlbccccc/

pb- og ztag"> nbc-0T: c-0-40 pb-mi og ztag"> nbc-0T: c-0-40 pb-mt" 转发至reBtht pnt og ztag">

m2a7"> " h(nbsp; ss=iReadCou noum2a7">lass="prog ztag"> m2a7">评论(nbsp; ss=iC3">? -Couration:none;" targehttp://blpn clya.pya.p-las报       

用易信  “扫一扫”

1

 
订阅< clasToL="nbwFyIgspaethospa> <8D%9A%E5%AE%A2% clasrc="htta>LOFTER clas_201 fc03 noENT> rget3102 4" og ztabcccccbccccc/inpu-163-comze:den" nam_ibl gsep p6ck 6de" id=6ck ">-prv "bcccccbccccccc/inpu-163-comze:den" nam_-prv "bcccccbccccccc/inpu-163-comze:den" nam_-prv "bcccccbccccccc/inpu-163-comze:den" nam_ ? -spvalu_雪碧图在站点<BRass=-I分布?

首先让我们回忆一下,以前切页面时,会用到哪些类型</Pass= <" rel="n"="TEXT-INDENT: 2e"cccass= 2em;" >我努力的想…努力的想啊…大概有:按钮、图标、其它</Pass= <" rel="n"="TEXT-INDENT: 2e"cccass=景图、竖铺背景图、左右自适应背景图、上下自适应背景图、颜色鲜艳且尺寸较大的背景图。

好像有点乱,让我们分下类。

 那么,再把我们回想的素材图归下类:

按实现方式:


固定尺寸雪碧图:按钮、图标、</Pass= <" rel="n"="TEXT-INDENT: 2e"cccass=;"P> <頳海</Pass=<BRass=栏目级雪便区分、左右自适应背景图(不使用九宫格的实现方式)
竖铺雪碧图:竖<BRass=景图、上下自适应背景图(不使用九宫格的实现方式)
横竖平铺背景图<BRass=种图不能合成雪碧图,一般用于网页背景花纹,大部分站点比较少出现最后,从站点的可实现性上考虑,我们该做多少张雪碧<BRass= <" rel="n"="TEXT-INDENT: 2e"cccass=XT-INDENT: 2em;" >

"ccass=<划? - sssx"chment/portal/201312/11/tp://www.w3cfuns.com/"cca/att"chment/portal/201312/11/tp://www.w3cfuns.com/"ccag" "耪掌"cccass=</Aass=</Pass= <" rel="n"="TEXT-INDENT: 2e"cccass=</Pass= <" rel="n"="TEXT-INDENT: 2e"cccass=P>

"ccass=<划? - sssx"chment/portal/201312/11/tp://www.w3cfuns.com/"cca/att"chment/portal/201312/11/tp://www.w3cfuns.com/"ccag" "耪掌"cccass=</Aass=</Pass= <" rel="n"="TEXT-INDENT: 2e"cccass=</Pass= <" rel="n"="TEXT-INDENT: 2e"cccass=使用,请求的个数不会很多,跟第一张图例的背景图请求数相比,规划清晰很多,请求数也减少很多了。

这些图该如何切、如何分布、命名,有没什么讲究?以</Pass= <" rel="n"="TEXT-INDENT: 2e"cccass=横铺图宽度使用20px, 使用1px宽度横铺会有渲染性能问题,竖铺同理。我就不详</Pass=<BRass=gachanbsp;阉鳎邢喙厥纠
固定尺寸的雪碧图一般可设定为宽度是网页宽度的一半,高度随图片内容增长。因为切图前你<BRass=栏目级雪多大尺寸,我的见解是,到切图后期你可能不需要单独用一张repeat-x.png的图放左右自适应的背景图,多数情况我们会用2个标签采用滑动门的方式实现左右自适应的背景,而页面宽度的一半即可实现最大宽度的左右自适应背景,那么这时你可以把左右自适应的背景放进这张雪碧图中了
" >片时固定尺寸的图与图之间相隔1像素,避免浏览器放大时,尺寸多计算1像素时可见到<BRass=的图片
栏目级雪碧图的名称按栏目级目录名命名,页面级雪碧图的名称按页面名称命名,组件类和皮<BRass=雪碧图同理,其它的可按表中的名称命名,这样方便区分和后期管理
跨项目通用的组件或某个组件的图片内容较多、修改频繁,可以独立出一张组件图,按组件名<BRass=,方便管理
如果站点的全局图标比较多,可以考虑将图标单独做一张雪碧图
建议图标使用一个新标签<BRass=,而不是直接用有内容的那个标签设定图标背景,这样你需要给<BRass=图图标与图标之间多留一些间距,另外遇到不同行高的时候,为了让图标背景垂直啵砥命名,组件类和皮肤类雪碧蛅骯-'DENT: 2em;" >大家对便区分和、如有嵊袖含规图图和看法"ht队粞晕颐且湟灰</Pass=<W┍ass=>-prv "bcccccbccccccc/inpu-163-comze:den" nam_-prv "bcccccbccccccc/inpu-163-comze:den" nam_

用微信&nbs>-prv "bcccccbccccccc/inpu-163-comze:den" nam_pvalu_-prv "bcccccbccccc /P>

">举眔per> clas">举眔per> cla-v c" og ztabcccccbccc/

f-myLikeI宋⒉ likebtn ss="> >订阅 f-myLikeI宋⒉ re03"> 1 _
订阅g phRe03"> reitm fcm2a">

c07 ztag"> reitm
<722T: 2etglNT:as- /dil2" title=ndDow/

reitm
<62NT: 2etgl0T:as- /dil2" title=ndDow/

m2a7">图ndDow cccc/糿dDownLbcccccbcccccbccc/

f-myLikeI宋⒉ rЧ圩頱tn ss="> >订阅/yixin f-bkicons/yixin f-bkico/yixin f-bkico/ style="TEXsnripog ztag">

ration:none;" targehttp://blp clas
rd -spc07 zt stRe03"> ? -s蘴"> c07 yod机謉" 讶Α 0yration:none;" target_zoom:1ce=纤/yixin f-bkicocc/ styc07 ztv class="mcnt BottomD">

cENT63blog/?embcccccbccc

um2a70px;">历史上规婉天 4pog ztag"> /yixin fbcccccbc/yixin f /P> 1 _
围r="_w:ze:den;" 讶Α um2a70px;">最近读者 4pog /P>

/yixin f /re-wrap plef/P> ration:none;" targe;visibdivty:ze:den;rginw:0;ww.loft0;>围r="_w:ze:den;" c07 ho<8Detar讶Α um2a70px;">热度 4pog /P> c07 ho

  • 先看 /re-wrap plef/P> 讶Α

    # <8D%9A%E5%AE%A2%ze:12px;text-dec"0" marginheight="0" id="rtop_in clme:dbdsdstyle="displa cc/ styc07 flasha2 ca flasha2 ca

  • 59

    nbssparency="true"> i "

    um2a70px;" 1 _围r="_w:ze:den;"i " ? -_om/r?"no" bordnbs%"hn

    12nspl&type=kl_240x275&locati e&affiliate=bloom/r?site=netease->
    //www.w3cfu@ hrrite" ling="i " s="m2a ib /re-wrap plef/P> c07 "="nbw_201las=sd" 1 _
    ration:ww.loft4d=12lass="blogse4d=12arency:p5=1_m_s5=1_m;ght="0"ǔ s|&nd #d5d5d5;嘌608506:#ffffe12_2015er(gn:n clce= " cc/

    1 _举;ww.loft<2lass="blogse<225100&type=2&16px_pe=2&u;og&pkidd7854e;cursor:poise" 2di ration:25100&tttp://2 cl:loginenng" >耪掌? -di " /h4 讶Α um2a70px;">评论 4pog cc/nbnam_? -dhc07 cENTC3">? -d /div /P>

    re-wrap plef/re-wrap plef/ sty讶Α re-wrapbccc/re-wrapbcc/re-wrapbc/re-wrap/re-wrap/ sty讶Αibl gsep p6ck 6de" id=6ck "',og ztag">\r\nk" rel="n\"="TEXT-INDENT: 2e\data\ "01312/11/\"/spimg\daqghq\"m-雪盶设置多大?如何排列?
    雪碧图在站点中萛设址植迹

    首先让我们回忆一下,以前切页面时,会用到哪些类型/b\>\r\nk" rel="n\"="TEXT-INDENT: 2e\data\ 2em;" >我努力的想…努力的想啊…大概有:按钮、图标、其它/b\>\r\nk" rel="n\"="TEXT-INDENT: 2e\data\ 景图、竖铺背景图、左右自适应背景图、上下自适应背景图、颜色鲜艳且尺寸较大的背景图。

    好像有点乱,让我们分下类。

    :'',og ztag">

    用微信&nbs',og ztag">

    用微信&nbs',og ztag"> -Cou? -Cou Add="bl:{},og ztag">:'',og ztag">举眀dss:faima,og ztag">:'c',og ztag">耪掌

    63304040get66get12n20219; <{if !!x">

    : 2efcass=2ef pog ztacc/nb讶Α耪掌on=1">${fn1(x.visitorNam_)}&r=${visitor. _Up,萫Tim9}"isog ztag"{(ima"> on=1">${fn1(x.visitorNam_)}"isog ztag"{ li"> /P>

    围Frog=='wap'"> wapI宋=纤/yndDow

    {(imaif x.m>围Frog=='iphogi'"> iphogiI宋=纤/yndDow
    {(imaif x.m>围Frog=='android'"> androidI宋=纤/yndDow
    {(imaif x.m>围Frog=='mobdii'"> wapI宋=纤/yndDow
    { li"> 耪掌 /re-wrapbccc/re-wrapbcc { li"> <{/li "> /nb<8D%9A%E5%AE%A2%讶Α耪掌 / sty讶Α? -}{ li"/re-wrap / sty讶Α

    re-wrap pl/P>

    # <8D%9A%E5%AE%A2s/

    cc/< st2og zta{ li"> <{if !!x"> ${ft=q()}${背緀rmer(nk}/?h> stBdss {/li "> m2a膟0" 过这篇日志的人晗杆p2og zta/P> 2og ztag"{li a as x"> < {if !!x"> : 2efcass=2ef pog ztacccc/nb讶Α耪掌 on=1">${fn1(x.Id2""> cc/ sty讶Α cc/< st2og ztacc/

    2og ztag"{ li"> < {/li "> cc/

    2og zta{if !!b&&b.length>0">

    喂y0" 图葡杆p2og zta/ 讶Α 用微信&nbs <{/li "> cc/< 讶Α转詉记录葡杆ndDowog zta
      reitm
    ${背IdferBdssUrl} 2og ztag"cc/ sty讶Α${背IdferHom9P(im} 2og ztag"ofteriframe{ li "> cc/< < <{if !!x"> 耪掌 <{/li "> og zta{li a as x"> <{if !!x"> 耪掌 <{/li "> og zta{li a as x"> <{if !!x"> <{/li "> < {if x_index>4}{bDetk}{ li"og ztag"{if !!x"> og ztag"cccc/nbsp;|讶Α${fn2(x.> cccc{/li "> cc/< < <{if !!x"> ${ft=q()}${背緀rmer(nk}/ {/li "> ilcly
    <6ge 纤/yndDowog ztaccc/ sty讶Α
    2og ztag{/li"> < {if !!(bdssD .n201BdssPermer(nk)"> irgly
    <6div> og ztag"c/ sty讶Α举报-je:1耪掌
    2og ztag{/li"> <{if !!x"> : 2efcass=2ef pog ztacc/nb讶Α耪掌on=1">${fn1(x.> on=1">${fn1(x.> /P>

    /re-wrapbccccc/nb讶Α /

    2og zta{/li"> <{/li "> 2og ztacccccccc/ sty讶Αog sp; /styog" ${stysize(headlasss.stysrc,240,150,tru_)}">og sp; /

    讶Α围r讶Α讶Α0"> 7}{bDetk}{ li"og scccccccc cc/liy讶Α
    do/h3·shndDow${背 cccccccccccccc {/li"> scccccccc/< scccccccc/ sty讶Α<8D%9A%E5%AE%A2%ze:12px;text-dec ng" >耪掌 2og ztag"cccccc/

    2og z

    re-wrapcccc/h4 讶Α bl /t藆l2og zta

    ne:1 >

    ="T髡t="容禁 4pogcccc/ul 讶Α bl /t藆l2og zta

    bl /t藆l2og zta

    bl /t藆l2og zta

    bl /t藆l2og zta< sty讶Α耪掌<" cass=&ss=shareA sti "cccc/bris/brisog zta/ styc07 yod机謉_s0yration:none;" tlogin_zoom:1ce=/yixin fbccc/ styc07 e="分蟔到Qgle /t stsog zta/ styc07 bdssPublicAccou

    re-wrapcccc/ sty讶Α b"nts="s2tag" ">og ztacc/ sty讶Α >

    <57">纤/yndDowog ztact stsog c/ sty讶Α 07 zta/t stsog z <{if !!x"> 耪掌 ${背k" hNam_|escape}/ cccccc{if (x.role!="-k") },“我是${c[x.role]}” {/li"> m2a7"> ${fn1(x.voteTim9)}杆ndDowog ztacccc{if x.userNam_==''}{ li"og zta{/li"> <{/li "> 用微信&nbs/"; // 的永久链接,作为 的唯一与投ogg.stwumii> so s"; // 留一想…英文逗号分隔目顽:"留一1,留一2"ogg.stwumiiS P5%8ixo src="httbdsss hrrite///www.w3cfu/"; //博客的主页地址,作为博客的唯一与投ogg.stwumiiParamso s&num=5&mo]e=3&pf hr"; //num为默认显示的为切 数目,mo]e为默认的卧示模式(1为 卒距2为和皮,3为自动)

    dI nWgiget.htm /t硕blog-sogt stsogcccccc/ sty讶Α纤/y stsog ztacc/ sty讶Α纤/y stsog ztat stsogcccc/ sty讶Α纤/y stsog ztacc/ sty讶Α纤/y stsog ztacc/ sty讶Α纤/y stsog ztat stsogcct stsogogt stsogcccccc/ sty讶Α纤/y stsog ztacc/ sty讶Α纤/y stsog ztacc/ sty讶Α纤/y stsog ztacc/ sty讶Α纤/y stsog ztacc/ sty讶Αog zta

    页今hth2>og ztat sty讶Αcccccc/aaqghq"m-耪掌情况照
    讶Α耪掌?;讶Α耪掌手机博客/讶Α耪掌LOFTER緂ht fc03 nookerget50ge9_0 oum21 p-shndDow/

    m2a8spc07 $_foot_sub禸lob9讶Αclac <9div> /nb讶Α订阅此博客/m2a8">inwi公司版权所有 copy;1997-get7杆p2og zt stsogt stst stsogcccc