css实现毛玻璃效果

原理就是 背景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>毛玻璃效果GLASSspan>
       div>
   div>
body>
html>

你可能感兴趣的:(CSS,css,css3,html)