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

背景图合并

2024-07-10 01:42:32   224人阅读

使用背景图合并技术，可以达到减少图片数量，从而减少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_丁小怪

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


联系
我们