背景模糊div

Question

需要帮助来创建此背景模糊而不会模糊文本。 我已经尝试过css过滤器属性，但不能使它看起来像这样。 我不是CSS鲨鱼，所以我希望有人可以给我一个简单的解决方案：D

Adob​​e XD背景模糊：

Answer 1

由于您未提供任何代码，因此这对您有帮助。

您可以使用css中的filter: blur(13px);制作带有模糊背景的div，并且内容不能位于模糊div中，因此我们将使用兄弟元素，而不是像这样

body {
  background: url('https://www.w3schools.com/html/img_girl.jpg') no-repeat center center fixed;
  background-size: cover;
}

.blur {
  background: url('https://www.w3schools.com/html/img_girl.jpg') no-repeat center center fixed;
  background-size: cover;
  overflow: hidden;
  filter: blur(13px);
  position: absolute;
  height: 300px;
  top: -50px;
  left: -50px;
  right: -50px;
  bottom: -50px;
}

.widget {
  border-top: 2px solid rgba(255, 255, 255, .5);
  border-bottom: 2px solid rgba(255, 255, 255, .5);
  height: 200px;
  width: 100%;
  overflow: hidden;
}

.center {
  position: absolute;
  margin: auto;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
}

.text h1 {
  text-align: center;
  color: #ffffff;
  margin-top: 57px;
  font-family: 'Lora', serif;
  font-weight: 700;
  font-size: 38px;
}

<div class="widget center">
  
  <div class="blur"></div>
  
  <div class="text center">
    <h1 class="">I am blurred div</h1>
  </div>

</div>