背景图上中下切图方案

 

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

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

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

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

  

 

posted @ 2019-11-19 23:53  抖音2020  阅读(126)  评论(0编辑  收藏