我们的背景图覆盖了文字，我们想要达到文字下面有背景图的效果。

wxml代码如下

<!--pages/register/register.wxml-->

<view class="background">

<image src="图片链接" mode="widthFix"></image>

</view>;

<view class="container" wx:if="{{item.img}}">

  <text class="header">账号登录</text>

  <view class="interact">

    <view class = "Head"><text class="nameInputText">账号</text></view>

      <input placeholder="账号" bindinput="nameInput"/>

    <text class="pwdInputText">密码</text>

      <input placeholder="密码" bindinput="pwdInput"/>

    <button class="button" bindtap="click">登录</button>

</view>

</view>

wxss代码如下：

/* pages/register/register.wxss */

page{

  height:100%;

  }

  .background image{

    width: 90%;

    display: relative;

  }

input{

  width: 100%;

  height: 20px;

    margin: 2%;

    padding: 2%;

    margin-bottom: 5%;

}

.Head {

  margin-top: 10px;

}

.header {

  display: block;

  padding: 10px;

  background-color: #a6c1ee;

  font-size: 38px;

  margin-top: 10px;

  line-height: 10px;

}

.container {

  margin-top: -100px;

  position:relative;

    z-index: 2;

  margin: 200px 50px 100px 50px;

  height: 400px;

  border: 3px solid #faca82;

  border-radius: 10rpx;

}

/*.nameInputText {

  position: relative;

  background: white;

  margin: -10px 0 0 10px;

  padding: 0 5px;

  color: rgb(144, 147, 167);

}*/

.button{

  text-align: center;

  padding: 10px;

  width: 80%;

  margin-top: 20px;

  background-image: linear-gradient(to right, #a6c1ee, #fbc2eb);

}