首页 > 代码库 > 背景图合并

背景图合并

使用背景图合并技术,可以达到减少图片数量,从而减少HTTP请求的目的,对网站加速有着举足轻重的作用。背景图合并的优势:

a)   可扩展,便于后期维护,当遇到排版变化时,比较容易维护。

b)   宽度自适应本身就减少了页面的工作量,背景图合并可以和宽度自适应结合在一块,大大减少了页面数量和图片大小,提升页面的loading速度。

例:

 

CSS样式:

.aaa{height:34px;float:left;background:url("images/i.gif") 0 -34px repeat-x;}

.bbb{height:34px;background:url("images/i.gif") 0 0 no-repeat;}

.ccc{height:34px;background:url("images/i.gif") right -68px no-repeat;line-height:34px;}

html代码:

<div class="aaa">

       <div class="bbb">

              <div class="ccc">菜单</div>

       </div>

</div>

 

效果实现:

         背景图合并 - 幸福镰刀 - HTML5_丁小怪

 实现原理:截取导航背景图左边条,中间条,右边条各一条,然后使用中间条平铺,然后在左右各放上左边条和右边条,使用三层嵌套。