微信小程序组件叠加效果（如 Android 中的添加蒙层）

妖狐艹你老母 2022-03-30 11:53 1922阅读 0赞

实现的效果如下：  
![效果图][1240]

可以看出这是由`image`组件和`text`组件叠加到一块组成的蒙层效果。  
![image.png][]

在小程序中实现这个效果主要用到`z-index`属性和`position`属性

**`z-index`的使用必须是双方组件都设置了`position`属性才会生效。**

`z-index`：表示的组件的层级关系，值越小越在最下方。

`position`：表示组件的位置，这里可以使用的值为`fixed，absolute`,使用`relative`不能实现该效果。

position 的可能值如下图：  
![image.png][image.png 1]

那么这里我们的的蒙版文字是在图片的上方，所以布局样式可以这么写：

> 重点关注 `position`和`z-index`即可。这里的`line-height: 100px;`也很重要，否则蒙层上的文本是不能居中对齐的。

布局
    <view class='item_view'>
        <image class='img-class' src='https://gss2.bdstatic.com/9fo3dSag_xI4khGkpoWK1HF6hhy/baike/c0%3Dbaike72%2C5%2C5%2C72%2C24/sign=2f3a8c47f4deb48fef64a98c9176514c/78310a55b319ebc4658560bf8526cffc1e171612.jpg'></image>
        <text class='text_num'>+3</text>
      </view>
    
    样式
    .item_view{
      margin-top: 100px;
      text-align: center;
      align-items: center;
      justify-content: center;
    }
    
    .img-class{
      width: 100px;
      height: 100px;
      z-index: -1;
      position: fixed;
    }
    
    .text_num{
      width: 100px;
      height: 100px;
      line-height: 100px;
      background: rgb(99, 99, 105);
      opacity: 0.5;
      font-size: 14px;
      color: rgb(248, 248, 244);
      z-index: 100;
      position: fixed;
    }

本文完，欢迎你的喜欢、或者留言和我讨论~

[1240]: /images/20220330/4561917da84447a5b65cbca0bf4a133f.png
[image.png]: /images/20220330/945bf0aefd2049ddac1ddf39a4d33f94.png
[image.png 1]: /images/20220330/521427416ab4408681de7d312202f22c.png