2021-06-07

---

前言

最近在学习H5的相关知识，由于从未接触H5，故借此博客记录一些我遇到的问题

---

如何在使用vant的popup组件时以简单的方式实现遮罩层的透明化？

其实在看了官方文档给的API后可以明显的找到如下几个prop与遮罩层有明显的关联
这个时候我首先想法就是将是否显示遮罩层overlay属性设为false，这样是否就能使遮罩层消失？不过如果这么容易就解决了我也不至于将其搬到此处来说了，显然这样做并没有使遮罩层产生任何变化，之后再网上多番寻找也没有找到一个合适的方法，基本没有直接提到相关问题的文章，而再进一步思考，我觉得还是得从官方给的API下手，而回头再看几个不同的属性，当然选择使用over-class指定给遮罩层的样式文件，既然不能直接让它不显示，那就间接达成目标嘛，使之背景色为透明不久自然而然的让它消失了吗？到这步实际上这个问题也就解决了。当然透明化需要使用opacity参数，设置为0即不透明度为0.这个参数使用起来相较于其他方式还是方便许多的。

最后附上使之透明的css代码：

.overlaystyle{
  background:red;
  opacity: 0.0;
}