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

实现的效果如下：

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

在小程序中实现这个效果主要用到z-index属性和position属性 
z-index的使用必须是双方组件都设置了position属性才会生效。 
z-index：表示的组件的层级关系，值越小越在最下方。 
position：表示组件的位置，这里可以使用的值为fixed，absolute,使用relative不能实现该效果。 
position 的可能值如下图：

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

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

布局

<view class='item_view'>
    <image'img-class'src'https://gss2.bdstatic.com/9fo3dSag_xI4khGkpoWK1HF6hhy/baike/c0%3Dbaike72%2C5%2C5%2C72%2C24/sign=2f3a8c47f4deb48fef64a98c9176514c/78310a55b319ebc4658560bf8526cffc1e171612.jpg'></image>
>+3</text>
样式


.item_view{
  textalign center;
  justifycontent;

  width;
  zindex -1;

;
  lineheight;
  opacity0.5  fontsize14px  color248244);
本文完，欢迎你的喜欢、或者留言和我讨论~

                
                                 
版权声明：本文内容由互联网用户自发贡献，该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 [e-mail] 举报，一经查实，本站将立刻删除。