使用css使内容模糊,并加盖遮罩层,
【摘要】
无模糊,加盖遮罩层效果
加特效后
css的特效代码只有两行
.mask{position: relative;filter: blur(2px);user-select: none;} .mask::after{position: absolute;top: 0;left:...
无模糊,加盖遮罩层效果
加特效后
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>
文章来源: fizzz.blog.csdn.net，作者：拿我格子衫来，版权归原作者所有，如需转载，请联系作者。
原文链接：fizzz.blog.csdn.net/article/details/105436002
推荐
华为开发者空间发布
让每位开发者拥有一台云主机
【版权声明】本文为华为云社区用户转载文章，如果您发现本社区中有涉嫌抄袭的内容，欢迎发送邮件进行举报，并提供相关证据，一经查实，本社区将立刻删除涉嫌侵权内容，举报邮箱：
cloudbbs@huaweicloud.com
- 点赞
- 收藏
- 关注作者
评论（0）