背景图上中下切图方案

 

工作中经常会遇到将背景图切为三个部分： 上部、中部、下部。

上部和下部：上部和下部使用容器的多背景图实现。

中部：使用绝对定位容器的方式解决。

html部分：

<section class="content-wrap">
     <div class="line-wrap">
     </div>
     <p>我是内容</p>
</section>

css部分：

.content-wrap{
position: relative;
background:url('/images/top-bg.png') left top no-repeat,
url('/images/bottom-bg.png') left bottom no-repeat;
background-size:100% auto;
.line-wrap{
position: absolute;left:0;top:4.8rem;bottom:2.73rem;z-index:-1;
width:100%;
background:url('/images/middle-bg.png') left top repeat-y;
background-size:100% auto;
}
}