Css 我怎样才能得到只有在盒子里才能使用的模糊效果

我试图在一个像这样的框中获得模糊效果，但目前，模糊效果覆盖了整个页面，而不仅仅是框内

使用

：before

，为模糊效果添加背景图像不是一个好主意吗

正文{
背景：url（'https://images.unsplash.com/photo-1496737018672-b1a6be2e949c?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1491&q=80’；
背景位置：0-200px；
背景尺寸：封面；
}
#包裹{
宽度：70%；
保证金：50px自动；
边框：1px实心#fff；
框大小：边框框；
溢出：隐藏；
}
.盒子{
宽度：90%；
身高：100%；
保证金：0自动；
}
.内容：以前{
位置：绝对位置；
显示：块；
内容：''；
排名：0；
左：0；
z指数：-1；
宽度：100%；
身高：100%；
z指数：-1；
背景：url（'https://images.unsplash.com/photo-1496737018672-b1a6be2e949c?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1491&q=80’；
背景位置：0；
背景尺寸：封面；
过滤器：模糊（10px）；
}
p{
颜色：#fff；
文本对齐：对齐；
}

Lorem ipsum dolor sit amet，是一位杰出的献身者。库拉比图尔·维勒·厄罗斯·胡斯托。在我的tincidunt。前庭是前庭的帆，前庭是前庭的帆。慈悲女神，坐在发酵罐里。悬钩子
福西布斯·因特杜姆·奥迪奥。矢状肌。整数id neque id turpis ornare ultricies位于vel tellus。

请添加

位置：相对到
#包装
。
会是这样的。
#wrap{位置：相对；宽度：70%；边距：50px自动；边框：1px实心#fff；框大小：边框框；溢出：隐藏；}
请澄清您的具体问题或添加其他详细信息，以突出显示您所需的内容。就目前编写的内容而言，很难准确说出您的要求。您的伪元素当前覆盖了整个视口。我使用
背景过滤器：blur（）
，提出了另一种解决方案（），但它的支持有限：。