微信小程序组件叠加效果（如Android中的添加蒙层）_小程序层叠轮播图 - CSDN文库

121 浏览量更新于2023-05-03 评论收藏 39KB PDF 举报

身份认证购VIP最低享 7 折!

领优惠券(最高得80元）

资源详情

资源评论

资源推荐

微信小程序微信小程序组件叠加效果（如组件叠加效果（如 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 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;

}

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

免责声明：本站所有文章和图片均来自用户分享和网络收集，文章和图片版权归原作者及原出处所有，仅供学习与参考，请勿用于商业用途，如果损害了您的权利，请联系网站客服处理。

本内容试读结束，登录后可阅读更多

下载后可阅读完整内容，剩余0页未读，立即下载

评论0

weixin_38569219

粉丝: 4
资源: 984

会员权益专享

图片转文字

全年可省5，000元立即开通

最新资源

资源上传下载、课程学习等过程中有任何疑问或建议，欢迎提出宝贵意见哦~我们会及时处理！点击此处反馈