短视频app制作，对于需要付费的内功，实现模糊遮罩效果

css实现：

<br>.tip {<br>position: relative;<br>top: 80px;<br>font-weight: 700;<br>text-align: center;<br>font-size: 16px;<br>color: #2878ff;<br>}

兼容性：

由于用ie不支持::after这种伪类，所以ie中不支持此方法，ie中可以配合模糊化图片进行处理。

完整代码示例：

<br><!DOCTYPE html><br><html><br><head><br><meta charset="utf-8"><br><title>内容模糊化</title><br><style type="text/css"><br>* {<br>padding: 0;<br>margin: 0;<br>list-style: none;<br>}<br>.wraper {<br>position: relative;<br>width: 100px;<br>margin: 100px auto;<br>padding: 0 20px;<br><br>}<br>ul {<br>width: 100%;<br>}<br>ul li {<br>height: 40px;<br>line-height: 40px;<br>}<br>.tip {<br>position: relative;<br>top: 80px;<br>font-weight: 700;<br>text-align: center;<br>font-size: 16px;<br>color: #2878ff;<br>}<br>.blur {<br>position: relative;<br>filter: blur(5px);<br>user-select: none;<br>}<br>.blur::after {<br>position: absolute;<br>top: 0;<br>left: 0;<br>width: 100%;<br>height: 100%;<br>content: '';<br>display: block;<br>background: rgba(255, 253, 253, 0.2);<br>}<br></style><br></head><br><body><br><div class="wraper"><br><p class="tip">开通VIP查看</p><br><ul class="blur"><br></ul><br></div><br></body><br></html>