背景图上中下切图方案

 

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

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

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

html部分：

?

1 2 3 4 5

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

css部分：

?

1 2 3 4 5 6 7 8 9 10 11 12

.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; } }