<强>微信小程序利用css实现遮罩效果实例详解
实现效果图:
如图所示,使用css实现小程序的遮罩效果,代码如下
<强> js文件代码:
//index.js//获取应用实例
应用var=getApp ()
页面({
数据:{
国旗:假
},
答:函数(){
这一点。setData({国旗:假})
},
b:函数(){
这一点。setData({国旗:真})
}
}）
之前
<强> wxs文件代码:
.b1{位置:固定;宽度:100%;高度:100%,最高:0 px;背景:rgba(0, 0, 0, 0.4);溢出:隐藏;}
.t_w{:相对;}
.b2{宽度:90%,利润率:35%汽车;溢出:隐藏;background - color: # fff; border - radius: 10 rpx;}
.v1{保证金:110 rpx汽车30 rpx汽车;颜色:# 999;字体大小:28 rpx; background - color: # fff;填充:0 rpx 30 rpx; text-align:中心;}
.v2 {background - color: # ff0000;填充:20 rpx 0 rpx; text-align:中心;溢出:隐藏;}
background - color .v3 {: deepskyblue;填充:20 rpx 0 rpx; text-align:中心;溢出:隐藏;}
.p1{显示:块;保证金:10 rpx汽车;字体大小:34 rpx;高度:34 rpx;行高:34 rpx;颜色:# ffffff,}
.p2{显示:块;保证金:10 rpx汽车;字体大小:24 rpx;高度:24 rpx;行高:24 rpx;颜色:# ffffff,}
.t_image{宽度:204 rpx;高度:200 rpx;位置:绝对;:-26%;左:40%;}
.t_image1{显示:块;宽度:204 rpx;高度:200 rpx;}
.btn1{边界:1 px固体透明;轮廓:没有,保证金:0 rpx汽车;-webkit-appearance:没有,-moz-appearance:没有,身高:88 rpx;行高:88 rpx;宽度:630 rpx; border - radius: 60 rpx;字体类型:“微软雅黑”,字体大小:36 rpx;颜色:# ffffff,光标:指针;background - color: # f05000; text-align:中心;不必:0 rpx 10 rpx 9 rpx 0 rpx rgba (240、80、0、0.35);
}
.btn2{保证金:30 rpx汽车40 rpx汽车;边界:1 px固体透明;轮廓:没有,-webkit-appearance:没有,-moz-appearance:没有,身高:88 rpx;行高:88 rpx;宽度:630 rpx; border - radius: 60 rpx;字体类型:“微软雅黑”,字体大小:36 rpx;颜色:# ffffff,光标:指针;background - color: # 5 adad0; text-align:中心;不必:0 rpx 10 rpx 9 rpx 0 rpx rgba (90218208, 0.35);
}
<强> wxml文件代码:
& lt;隐藏视图类=癰1”=皗{旗帜}}”比;
& lt;视图类=皌_w”比;
& lt;视图类=皌_image”比;
& lt;图像类=" t_image1 " src=" https://www.yisu.com/images/qcm.png "祝辞& lt;/image>
& lt;/view>
& lt;视图类=癰2”比;
& lt;视图类=皏1”在由于您周边3公里有没有指尖快递服务站,指尖快递将无法为您提供上门取件服务。您可以试试拨打电话或网上预约快递公司。;/view>
& lt;视图类=" btn1 " bindtap=癰”比;
& lt; p=皃1”类在拨打电话& lt;/p>
& lt; p=皃2”类在可拨打电话直接与快递公司联系哦& lt;/p>
& lt;/view>
& lt;视图类="这里" bindtap=癰”比;
& lt; p=皃1”类的在网上预约快递公司& lt;/p>
& lt; p=皃2”类的在快递公司可能无法及时响应,请耐心等待哦& lt;/p>
& lt;/view>
& lt;/view>
& lt;/view>
& lt;/view>
& lt;视图bindtap=癮”在显示& lt;/view>之前
到此位置,演示已经完成
感谢阅读,希望能帮助到大家,谢谢大家对本站的支持!
