整体效果

使用backdrop-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>Document</title>
    <style>
      html,
      body {
        margin: 0;
        width: 100%;
        height: 100%;
        background: url(https://img1.baidu.com/it/u=1175815308,3898196667&fm=253&fmt=auto&app=120&f=JPEG?w=1280&h=800);
        background-size: 100% 100%;
        overflow: hidden;
      }
  
      .card {
        margin: 100px auto;
        width: 300px;
        height: 300px;
        position: relative;
        border: 1px solid #000;
        color: white;
        backdrop-filter: blur(10px);
        background-color: rgba(0,0,0,.3);
      }
    </style>
</head>
<body>
  <div class="card">
    <div class="text">123123123123123123123123123123123123123123123123123123123123123123123123123</div>
	</div>
</body>
</html>

使用filter + 伪元素

添加filter效果如下

.card {
    margin: 100px auto;
    width: 300px;
    height: 300px;
    position: relative;
    border: 1px solid #000;
    color: white;
    /* backdrop-filter: blur(10px); */
    filter: blur(10px);
    background-color: rgba(0,0,0,.3);
}

有阴影，但没有玻璃效果，所以对图片才能模糊，取父盒子背景图的一块

添加伪元素：

background-attachment:fixed作用：背景图片相对于视口固定，可以近似取父元素背景图的某一块区域

.card {
    margin: 100px auto;
    width: 300px;
    height: 300px;
    position: relative;
    border: 1px solid #000;
    color: white;
    /* backdrop-filter: blur(10px); */
    background-color: rgba(0,0,0,.3);
}
.card::before {
    content: ' ';
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    z-index: 0;
    /* filter: blur(10px); */
    background: url(https://img1.baidu.com/it/u=1303632307,4058044&fm=253&fmt=auto&app=138&f=JPEG?w=889&h=500) no-repeat center;
    background-attachment: fixed;
    background-size: cover; 
    margin: -20px;
}

不使用background-attachment:fixed 使用background-attachment:fixed 再添加filter: blur(10px)，已经比较还原模糊效果；但是因为设计稿的背景原本是颜色的，现在换成了图片，我们需要换成颜色的话，就需要再添加一个伪元素来模拟颜色。

.card::after {
    content: ' ';
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    z-index: 0;
    background-color: rgba(0, 0, 0, 0.2);
}

再给文字添加z-index

.text {
    position: relative;
    z-index: 1;
}

完整代码

<!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>Document</title>
    <style>
      html,
      body {
        margin: 0;
        width: 100%;
        height: 100%;
        background: url(https://img1.baidu.com/it/u=195676648,2282096225&fm=253&fmt=auto&app=138&f=JPEG?w=889&h=500);
        background-size: 100% 100%;
        overflow: hidden;
      }
  
      .card {
        margin: 100px auto;
        width: 300px;
        height: 300px;
        position: relative;
        border: 1px solid #000;
        color: white;
        backdrop-filter: blur(10px);
        background-color: rgba(0,0,0,.3);
      }
  
      .text {
        position: relative;
        z-index: 1;
      }
  
      .card::before {
        content: ' ';
        position: absolute;
        top: 0;
        right: 0;
        bottom: 0;
        left: 0;
        z-index: 0;
        filter: blur(10px);
        background: url(https://img1.baidu.com/it/u=195676648,2282096225&fm=253&fmt=auto&app=138&f=JPEG?w=889&h=500) no-repeat center;
        background-attachment: fixed;
        background-size: cover; 
        margin: -20px;
      }
  
      .card::after {
        content: ' ';
        position: absolute;
        top: 0;
        right: 0;
        bottom: 0;
        left: 0;
        z-index: 0;
        background-color: rgba(0, 0, 0, 0.2);
      }
    </style>
</head>
<body>
  <div class="card">
		<div class="text">dasdadadasddasdadadasdaddasdaddadas</div>
	</div>
    <script>
    </script>
</body>
</html>

CSS实现毛玻璃