小程序如何实现多个按钮元素flex两行布局，加上图片多层叠加互不影响？

Question

各位老师好，在学习的过程中，碰到这样一个问题，实现起来比较复杂，不知道该怎么办，求指点。

现在主要的矛盾点是，昨天好不容易，解决了小程序按钮添加背景图的问题，就没法再给展示信息的icon图标定位，好崩溃，这个布局对于我来说太难了。

我自己拆解的思路是：

• 首先按钮item元素考虑使用flex布局展示2列，行数直接复用；
• 其次按钮元素上层添加背景图和黑色半透明遮罩；
• 最后一层展示信息，包括一个icon图标和按钮标题文字，需要使用flex靠左对齐横向排列；

效果图：

图层拆解

我写的代码如下

wxml

<view class="menu-box">
      <view class="menu-list">
            <navigator class='menu-button' openType="switchTab" url="/pages/list/list">
                <view class="menu-mask"></view>
                <text>菜单入口1</text>
                <image mode="widthFix" src="/images/icon.png"></image>
                <image class="menu-image" src="https://cdn.image.com/text/background-image.jpg"></image>
            </navigator>
            <navigator class='menu-button' openType="switchTab" url="/pages/text/text">
              <view class="menu-mask"></view>
                <text>菜单入口2</text>
                <image mode="widthFix" src="/images/icon.png"></image>
                <image class="menu-image" src="https://cdn.image.com/text/background-image.jpg"></image>
             </navigator>
      </view>
</view>

wxss

.menu-box {
  margin-top: 20rpx;
}

.menu-list {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  padding-left: 24rpx;
  padding-right: 24rpx;
  padding-top: 24rpx;
}
.menu-list .munu-mask {
  top:0;
  left:0;
  right:0;
  bottom:0;
  opacity: 0.3;
  position: absolute;
  background-color: #111111;
}
.menu-button {
  display: flex;
  position: relative;
  overflow: hidden;
  align-items: center;
  justify-content: center;
  border-radius: 10rpx;
  width: 340rpx; 
  height: 110rpx;
}

.menu-box .menu-list .menu-button menu-image{
  width: 340rpx;
  height: 110rpx;
  border-radius: 10rpx;
}

.menu-box .menu-list .menu-button text{
  color: #ffffff;
  font-weight: 600;
  font-size: 28rpx;
  position: absolute;
}

Answer 1

1. 左右两边布局的可以使用百分比50%，然后float：left or right就行
2. 透明的那个只需要添加opacity：0.几就行
3. 最上面一层只要添加z-index：够高