我们的背景图覆盖了文字,我们想要达到文字下面有背景图的效果。
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);
}
用定位,加层深z-index,层深越高在最上面