工作中经常会遇到将背景图切为三个部分: 上部、中部、下部。
上部和下部:上部和下部使用容器的多背景图实现。
中部:使用绝对定位容器的方式解决。
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; 100%; background:url('/images/middle-bg.png') left top repeat-y; background-size:100% auto; } }