使用css使内容模糊,并加盖遮罩层,
无模糊,加盖遮罩层效果
加特效后
css的特效代码只有两行
.mask{position: relative;filter: blur(2px);user-select: none;}
.mask::after{position: absolute;top: 0;left: 0;width: 100%;height: 100%;content: '';display: block;background: rgba(255, 253, 253, 0.2);}为需要加特效的div加上一个mask类即可生效
主要使用了伪类,以及相对定位,绝对定位的知识. 另外过滤器filter, 以及rgba的透明度设置
如果需要在模糊层上显示一个开通VIP的字眼, 则需要在模糊层的外层,使用相对定位.
如
css
.topinfo{position: relative;left: 147px;color: #673ab7;font-weight: bold;}完整代码
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width,inital-scale=1" />
<style type="text/css">
html,body{
height: 100%;
width: 100%;
display: flex;
align-items: center;
justify-content: center;
}
.mask{position: relative;filter: blur(2px);user-select: none;}
.mask::after{position: absolute;top: 0;left: 0;width: 100%;height: 100%;content: '';display: block;background: rgba(255, 253, 253, 0.2);}
.topinfo{position: relative;left: 147px;color: #673ab7;font-weight: bold;}
.myapp{
width: 200px;
height: 200px;
border: 1px solid #ddd;
color: red;
display: flex;
align-items: center;
justify-content: center;
flex-direction: column;
}
</style>
</head>
<body>
<p class="topinfo" >开通VIP查看</p>
<div class="myapp mask">
<p>床前明月光</p>
<p>疑是地上霜</p>
<p>举头望明月</p>
<p>低头思故乡</p>
</div>
</body>
</html>本文参与 腾讯云自媒体同步曝光计划，分享自作者个人站点/博客。
如有侵权请联系 cloudcommunity@tencent.com 删除
评论
登录后参与评论
推荐阅读
腾讯云开发者
