毛玻璃效果就是模糊效果，关键是让谁模糊？对元素运用filter: blur(30px)会让它的子元素也变模糊，所以不能让class="content"元素模糊；

这里文本所在的区域宽高是不定的，所以没办法用一个空div做模糊效果，然后“垫”在class="content"元素下面。于是，我们想到了伪类。

<div class="poem">
   <div class="content">
       <p>
            明月别枝惊鹊，<br>
            清风半夜鸣蝉。<br>
            稻花香里说丰年，<br>
            听取蛙声一片。<br>
            七八个星天外，<br>
            两三点雨山前。<br>
            旧时茅店社林边，<br>
            路转溪桥忽见。<br>
       </p>
   </div>
</div>

将伪类的位置设置成和内容元素一样，使用负的 z-index 来把一个伪类移动到class="content"元素下层。在使用负的 z-index 来把一个子元素移动到它的父元素下层时，请务必小心：如果父元素的上级元素有背景，则该子元素将出现在它们之后。 所以为class="content"元素设置z-index: 1;使伪元素出现在父父元素（class="poem"元素）之上。

总结

为伪元素设置和class="poem"元素一样的背景，为了让伪元素和class="poem"元素的背景重叠，用background-attachment: fixed 。此时对伪元素使用filter: blur(30px);就形成了毛玻璃效果。

.poem{
   width: 100vw;
   height: 100vh;
   display: flex;
   justify-content: center;
   align-items: center;
}
.poem,.content::before{
   background: url('./images/pic9.jpg');
   background-size: cover;
   background-attachment: fixed;
}
.poem .content{
   box-sizing: border-box;
   color:#f9f9f9;
   font-size: 20px;
   line-height: 2.2em;
   letter-spacing: 3px;
   text-align: center;
   padding: 40px 30px 35px 40px;
   background: hsla(0, 0%, 100%, 0.3);
   position: relative;
   overflow: hidden;
   z-index: 1;
}
.poem .content::before{
   content: '';
   position: absolute;
   top: 0;
   left: 0;
   right: 0;
   bottom: 0;
   filter: blur(30px);
   margin: -30px;
   z-index: -1;
}