收藏
回答

背景图覆盖了文字,有效方法的寻求?

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

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

}

回答关注问题邀请回答
收藏

1 个回答

  • Lanmou
    Lanmou
    05-04

    用定位,加层深z-index,层深越高在最上面

    05-04
    有用 1
    回复 1
    • 簌不酥@_@
      簌不酥@_@
      05-09
      谢谢大佬了
      05-09
      回复
登录 后发表内容