微信小程序 组件叠加效果(如 Android 中的添加蒙层)
- 作者: admin
- 发布于 2019-01-07 10:32:16
- 来源:
- 栏目:解决方案
导语: 实现的效果如下: 可以看出这是由image组件和text组件叠加到一块组成的蒙层效果。
实现的效果如下:
可以看出这是由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; }
本文完,欢迎你的喜欢、或者留言和我讨论~
|
温馨提示:这篇文章没有解决您的问题?欢迎添加微信:18948083295,有微信小程序专业人员,保证有问必答。转载本站文章请注明转自http://www.okeydown.com/(微信小程序网)。