微信小程序 組件疊加效果（如 Android 中的添加蒙層）
發(fā)布時間：2019-01-08 09:07 所屬欄目：小程序開發(fā)教程
實現(xiàn)的效果如下：
可以看出這是由image組件和text組件疊加到一塊組成的蒙層效果。
在小程序中實現(xiàn)這個效果主要用到z-index屬性和position屬性
z-index的使用必須是雙方組件都設(shè)置了position屬性才會生效。
z-index：表示的組件的層級關(guān)系，值越小越在最下方。
position：表示組件的位置，這里可以使用的值為fixed，absolute,使用relative不能實現(xiàn)該效果。
position 的可能值如下圖：
那么這里我們的的蒙版文字是在圖片的上方，所以布局樣式可以這么寫：
重點關(guān)注 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;
}
|
本文完，歡迎你的喜歡、或者留言和我討論~
