CSS：毛玻璃效果

                                                                                               

通过伪元素进行处理，然后将其元素定位到元素的下层（z-index:-1），它的背景将会无缝比配到body中

 

 

*{margin: 0;padding: 0;box-sizing: border-box;}
body,.main::before{background: url("15.jpg") 0/cover fixed;}
.main{padding: 20px;margin:100px auto 0 auto;width: 500px;position: relative;overflow: hidden;color:#fff;}
.main::before{content: '';position: absolute;top:0;right: 0;left: 0;bottom: 0;filter:blur(20px);z-index:-1;}

 

<div class="main">
  SHDUEI DWIH DEU DGGDUIHUI HOJDH dhsh hdui rhu e de ihd huih<br>
  dhsh hdui rhu e de ihd huih<br>
  dhsh hdui rhu e de ihd huih<br>
  SHDUEI DWIH DEU DGGDUIHUI HOJDH dhsh hdui rhu e de ihd huih<br>
  dhsh hdui rhu e de ihd huih<br>
  dhsh hdui rhu e de ihd huih<br>
</div>