使用css使内容模糊,并加盖遮罩层,

拿我格子衫来

发布于 2022-01-24 18:58:35

3.2K0

文章被收录于专栏：TopFETopFE

无模糊,加盖遮罩层效果

加特效后

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 删除

css

使用css使内容模糊,并加盖遮罩层,

使用css使内容模糊,并加盖遮罩层,

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐