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

Question

我正在尝试在像 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;}

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

how can I get blur effect that only works in box

css

blur