HTML中如何使用遮罩层

页面中先做出一个【领红包】的按钮，如图（图中左侧是效果右侧是代码），点击这个按钮就会d出一个红包的活动消息，即我们要的遮罩效果

css遮罩层怎么做

css遮罩层怎么做

第二步：做出遮罩层

遮罩层的作用就是将层后面的内容都遮住，覆盖全屏，所以：

宽高都设为：100%；

位置 position：absolute；left：0； top:0

背景色 一般都设为透明的 background: rgba(0,0,0,0.5)

层的顺序 z-index:100 (设置一个比较大的数值)

css遮罩层怎么做

第三步：做出遮罩层上的内容

1、在遮罩层上添加活动效果图

2、关闭活动信息d出框的【关闭】按钮

注意:遮罩层上的内容也要添加上z-index且数值要比遮罩层的大，z-index:101

如图（左侧效果，右侧代码）

css遮罩层怎么做

css遮罩层怎么做

第四步：用js实现遮罩效果演示

首先我们看到的页面上是没有遮罩层的，只有一个【领红包】的按钮在页面中；

然后我们点就【领红包】按钮，就d出遮罩效果；再要关闭遮罩层时点击右上角的关闭按钮，就退出了遮罩成的活动信息。具体 *** 作如下：

1、将遮罩层隐藏起来 display：none；

2、点击【领红包】时，遮罩层显示 display：block

3、点击关闭按钮，遮罩层消失 display：none；

如图

css遮罩层怎么做

css遮罩层怎么做

css遮罩层怎么做

css遮罩层怎么做

css遮罩层怎么做

首先，点击红包之后，收取红包的流程相对来说是比较简单的，大致如下：

一、打开红包页面。 点击红包，进入红包详情页面，此时会有一个「领取红包」的按钮，点击这个按钮就可以开始领取红包了。

二、完善收件信息。 在完成支付之后，需要填写一些收件人信息，比如收件人姓名、手机号码等，这些信息可以由红包发送者提供，也可由收件人自行填写。

三、提交领取。 把收件信息填写完，然后点击红包详情页面里的「确认提交」按钮，即可完成领取红包的流程。

四、查看红包状态。 点击红包详情页面里的「红包状态」按钮，即可看到收件人已经成功收到红包的详细情况，也可以看到红包已收取失败的信息，以及重新收取的方法等。

总之，收取红包相对来说是比较简单的一件事，只需要遵循上述的 *** 作流程，就可以成功收取红包。当然，每家公司红包规则会有不同，因此在使用的时候也要注意规则的内容，以免收不到红包。