用户
 找回密码
 立即注册

QQ登录

只需一步,快速开始

扫一扫,登录网站

小程序社区 首页 教程 实战教程 查看内容

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

Rolan 2019-1-7 00:21

实现的效果如下:可以看出这是由image组件和text组件叠加到一块组成的蒙层效果。在小程序中实现这个效果主要用到z-index属性和position属性z-index的使用必须是双方组件都设置了position属性才会生效。z-index:表示 ...

实现的效果如下:

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

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

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

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

布局

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

样式

  1. .item_view{
  2. margin-top: 100px;
  3. text-align: center;
  4. align-items: center;
  5. justify-content: center;
  6. }
  7. .img-class{
  8. width: 100px;
  9. height: 100px;
  10. z-index: -1;
  11. position: fixed;
  12. }
  13. .text_num{
  14. width: 100px;
  15. height: 100px;
  16. line-height: 100px;
  17. background: rgb(99, 99, 105);
  18. opacity: 0.5;
  19. font-size: 14px;
  20. color: rgb(248, 248, 244);
  21. z-index: 100;
  22. position: fixed;
  23. }

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

鲜花
鲜花
鸡蛋
鸡蛋
分享至 : QQ空间
收藏
原作者: 龙衣袭 来自: 简书