使用背景图合并技术，可以达到减少图片数量，从而减少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> |
效果实现：
实现原理：截取导航背景图左边条，中间条，右边条各一条，然后使用中间条平铺，然后在左右各放上左边条和右边条，使用三层嵌套。
时间： 2024-10-21 22:38:01