我如何获得仅在框[重复]中起作用的模糊效果

Question

此问题已经在这里有了答案：

Position absolute but relative to parent（4个答案）

[<6天前关闭。

我试图在类似this的框中获得模糊效果，但目前，模糊效果覆盖了整个页面，而不是仅覆盖框内]]

使用:before添加背景图像以获得模糊效果不是一个好主意吗？

body {
  background: url('https://images.unsplash.com/photo-1496737018672-b1a6be2e949c?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1491&q=80');
  background-position: 0 -200px;
  background-size: cover;
}

#wrap {
  width: 70%;
  margin: 50px auto;
  border: 1px solid #fff;
  box-sizing: border-box;
  overflow: hidden;
}

.box {
  width: 90%;
  height: 100%;
  margin: 0 auto;
}

.content:before {
  position: absolute;
  display: block;
  content: '';
  top: 0;
  left: 0;
  z-index: -1;
  width: 100%;
  height: 100%;
  z-index: -1;
  background: url('https://images.unsplash.com/photo-1496737018672-b1a6be2e949c?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1491&q=80');
  background-position: 0 0;
  background-size: cover;
  filter: blur(10px);
}

p {
  color: #fff;
  text-align: justify;
}

<div id="wrap">
  <div class="box">
    <div class="content">
    </div>
    <p>
      Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur vel eros justo. Proin in tincidunt mi. Vestibulum quis velit vestibulum lectus eleifend ultrices ut ac mi. Quisque sagittis faucibus diam, sit amet rhoncus nisi fermentum in. Suspendisse
      faucibus interdum odio. Quisque iaculis accumsan sagittis. Integer id neque id turpis ornare ultricies at vel tellus.
    </p>
  </div>
</div>

我正在尝试在这样的盒子中获得模糊效果，但是目前，模糊效果覆盖了整个页面，而不是仅覆盖盒子内部。为模糊添加背景图像不是一个好主意... 

Answer 1

[请将position: relative;添加到#wrap。会是这样。#wrap {position: relative; width: 70%; margin: 50px auto; border: 1px solid #fff; box-sizing: border-box; overflow: hidden;}