其實毛玻璃很簡單

只需要在css中加入

backdrop-filter:blur(8px);

8px是模糊力度

注意：使用該方法前需要設定背景不能是透明（如果是顯示這個元素下面的影象記得半透明，例子就是）

完整例子：

例子目錄下有一個背景圖片 bg.jpg 和css檔案 毛玻璃.css

HTML:

<!DOCTYPE html>

<html>

    <head>

        <meta charset="utf-8"/>

        <title>標題</title>

        <style>

            body{

                background-image:url('bg.jpg');

                background-repeat:no-repeat;

                background-attachment:fixed;

                background-position:center;

            }

            *{

                padding: 0;

                margin: 0;

            }

            #main{

                width:600px;

                height:300px;

                position: absolute;

                top: 50%;

                left: 50%;

                transform: translate(-50%, -50%);

                background-color:rgba(255,255,255,0.6);

                border-radius:25px;

            }

            #text{

                position: absolute;

                left: 50%;

                top: 50%;

                transform: translate(-50%, -50%);

            }

        </style>

        <link rel="stylesheet" href="毛玻璃.css" type="text/css" />

    </head>

    <body id="body-id">

        <div id="main">

            <h1 id="text">毛玻璃</h1>

        </div>

    </body>

    <script type="text/javascript">

    </script>

</html>

僅模糊的css（重點）:

毛玻璃.css

#main{

    backdrop-filter:blur(8px);

}

效果：

用firefox的注意了！

firefox70+的版本不支援 backdrop-filter 只支援 filter 了

根據實測效果沒變化，但子元素(也就是裡面的文字）也會模糊！！！

解決的方法還是有的：

https://www.cnblogs.com/arrayblog/p/14180549.html