前端-自适应背景框

　　　　关于近期做多语言页面比较多，所以背景框都是得自适应的，就是只拉背景框的身，头部和尾部不拉伸，

　　　　UI给的设计图是三段合成的框：

　　

 

　　　　一开始我看到上一个前端是放三个标签设置背景：

html:

1 <div class="activity_time">
2              <div class="box_1"></div> 
3             <div class="box_2">{{$t("elelive_7")}}</div>
4             <div class="box_3"></div>
5           </div>

 

css:

 1 .main .activity_time .box_1 {
 2   width: 7.1rem;
 3   min-height: 0.98rem;
 4   /* background: url(../images/box01.png) no-repeat;
 5   background-size: 100% 100%; */
 6   padding: .64rem .64rem 0 .64rem;
 7   box-sizing: border-box;
 8 } 
 9 .activity_time .box_2
10 {
11   width: 7.1rem;
12   min-height: 0.62rem;
13   /* background: url(../images/box02.png);
14   background-size: 100% 100%; */
15  
16   box-sizing: border-box;
17   padding: 0 .64rem 0rem 0.64rem;
18 
19 }
20 
21 .activity_time .box_3{
22   width: 7.1rem;
23   height: 0.88rem;
24   /* background: url(../images/box03.png) no-repeat;
25   background-size: 100%; */
26   box-sizing: border-box;
27   padding: 0 .64rem 0rem 0.64rem;
28 }

　　但是如此一来内容就得放在其中一个标签里面了,设计图的内容一般在头部和尾部的背景框也有内容，所以，想到可不可以合成背景，一个div实现，经过各种调整代码如下：

　

 1  .main .activity_time{
 2   font-size: 0.24rem;
 3   font-family: PingFang SC;
 4   font-weight: 400;
 5   line-height: 0.34rem;
 6   width: 7.1rem;
 7   min-height: 2.5rem;
 8   background: url(../images/box01.png) no-repeat center top,url(../images/box02.png)no-repeat center center ,url(../images/box03.png) no-repeat center bottom;
 9   background-size: 100% .98rem,100% calc(100% - 1.86rem) ,100% 0.88rem;
10   background-position: 0 0 ,0 0.98rem , 0 100%;
11   color:#CDF5FF ;
12   padding: .64rem;
13   box-sizing: border-box;
14 }

 效果如下：

 

标签：box,背景,前端,64rem,适应,background,rem,images,100%
来源： https://www.cnblogs.com/CMirs/p/16424648.html