css实现毛玻璃效果

想要成仙的菜鸟前端

6136人浏览 · 2022-08-03 16:06:16

想要成仙的菜鸟前端 · 2022-08-03 16:06:16 发布

在这里插入图片描述

原理就是背景banner 与 glass使用同一张图片，galss和banner同大小宽高，glass在上方，下方是banner背景，对glass进行 clip-path剪切，然后对剪切的部分使用 filter模糊

<!DOCTYPE html>
<html lang="en">
<head>
   <meta charset="UTF-8">
   <meta http-equiv="X-UA-Compatible" content="IE=edge">
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
   <title>毛玻璃效果制作</title>
</head>
<style>
   *{
       margin: 0;
       padding: 0;
       box-sizing: border-box;
   }
   html,body{
       width: 100vw;
       height: 100vh;

   }
   .banner{
       width: 100vw;
       height: 100vh;
       background: url(../images/cbd.jpg);
       background-position: center;
       background-size: cover;
       display: flex;
       justify-content: center;
       align-items: center;

   }


   .glass{
       width: 100%;
       height: 100%;
       background: url(../images/cbd.jpg);
       background-size: cover;
       background-position:center;
       clip-path: inset(200px 200px);
       filter: blur(20px);
       display: flex;
       justify-content: center;
       align-items: center;

   }
   span{
       position: absolute;
       color: white;
       font-size: 40px;
       letter-spacing: 0.75em;
       padding-left: 0.375em;
   }
   .drop-shadow{
       height: 100%;
       width: 100%;
       filter:  drop-shadow(0px 20px 10px rgba(0, 0, 0, 0.5));
       display: flex;
       justify-content: center;
       align-items: center;
   }
</style>
<body>
   <div class="banner">
       <div class="drop-shadow">
           <div class="glass"></div>
           <span>毛玻璃效果GLASS</span>
       </div>
   </div>
</body>
</html>