When image component in wechat applet is used as background picture

present situation

The files involved in the applet project code are ：

1. pages/about/about.wxml
2. pages/about/about.wxss

pages/about/about.wxml

<view class="aboutContainer">
  <image src="/static/images/aito.jpg"></image>
  <view class="title">AITO  Ask boundary M5</view>
</view> 

pages/about/about.wxss

.aboutContainer{
    
  width: 100%;
}
.aboutContainer image{
    
  width: 100%;
  height: 480rpx;
}
.aboutContainer .title{
    
  width: 500rpx;
  height:300rpx ;
  line-height: 300rpx;
  text-align: center;
  border: 1px solid red;
  font-size: 36rpx;
}

demand

<image src="/static/images/aito.jpg"></image> Use as background , Text "AITO Ask boundary M5" Place in the vertical center of the background picture .

Realization

The documents involved in the code change are ：pages/about/about.wxss.

pages/about/about.wxss

.aboutContainer{
    
  width: 100%;
  position: relative;
}
.aboutContainer image{
    
  width: 100%;
  height: 480rpx;
}
.aboutContainer .title{
    
  position: absolute;
  left: 50%;top: 50%;
  margin-left: -250rpx;
  margin-top: -150rpx;

  width: 500rpx;
  height:300rpx ;
  line-height: 300rpx;
  text-align: center;
  /* border: 1px solid red; */
  color: #fff;
  font-size: 36rpx;
}