背景图处理总结

一、背景图

步骤：

1.html结构：三个div嵌套

2.psd切图：如页眉和页脚显示不同，切三张图：页眉、正文中间的图、页脚。

3.css

1.html结构如下：

<div  class="box1">

          <div class="box2">

                      <div class="box3">

                             内容

                      </div>

          </div>

</div>

2.psd切图总结：

例：

如上图，页眉和页脚都不同，分别切图且页眉、页脚、正文的图宽度高度相同。背景纵向平铺则切图可放横向的一图上，背景横向平铺则反之。

背景纵向平铺，切图如下：

3.css

 设置宽高后，三层div使用背景background：第一层div正文图片全部平铺，第二层div页眉覆盖，第三层div页脚覆盖。

.box1{background：url（正文图） y-repeat  /*position*/；}

.box2{background：url（页眉图） no-repeat  /*position*/；}

.box3{background：url（页脚图） no-repeat  /*position*/；}