css代码


<style>
  body,main::before{
    background: url("images/1.jpg") 0 / cover fixed;
  }
  main{
    position: relative;
    display: flex;
    align-content: center;
    justify-content: center;
    margin-top: 200px;
    padding: 30px;
    background: hsla(0,0%,100%,.3);
    border-radius: 5px;
  }
  main::before{
    content: '';
    position: absolute;
    top:0;right:0;bottom:0;left:0;
    filter: blur(20px);
    z-index: -1;
    
  }
</style>

用CSS制作毛玻璃效果（高斯模糊效果）_毛玻璃效果​

 你也可以下载我的一个​​demo​​，其实就是上面的一段代码

效果图：

用CSS制作毛玻璃效果（高斯模糊效果）_高斯模糊_02​

用CSS制作毛玻璃效果（高斯模糊效果）_毛玻璃效果_03用CSS制作毛玻璃效果（高斯模糊效果）_css_04用CSS制作毛玻璃效果（高斯模糊效果）_毛玻璃效果_05