html - 如何对背景图像的特定区域施加模糊效果？

Question

我有一个带有背景图片的 div。在 div 内部，有一个带有文本的居中 div。为了使文本阅读起来更舒适，我想模糊该特定区域中父 div 的背景图像

我想在 text div 上使用 backdrop-filter: blur，但发现 firefox 还不支持它

.parent {
  background: url(...);
  width: 100%;
  height: 100vh;
  display: flex;
  justify-content: center;
  align-items: center;
}

.child {
  width: 300px;
  height: 300px;
  backdrop-filter: blur(10px) ---unfortunately not supported in firefox
}

<div class="parent">
  <div class="child">
    Lorem ipsum
  </div>
</div>

还有其他方法可以模糊背面区域吗？

Answer 1

backdrop-filter 几乎不被支持，只有 Webkit Nightlies但过滤:模糊(10px)；得到更多支持。

您可以尝试使用过滤器的替代方法并使用背景附件创建 2 个彼此重叠的部分，较小的部分模糊。

例子:

body {
  background: url(https://placeimg.com/640/480/tech);
  background-attachment: fixed;
  /* prepare for the blurry piece to add */
  background-size: 100vw auto;
  margin: 0;
  min-height: 100vh;
  display: flex;
}

p:before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  width: 100%;
  z-index: -1;
  filter: blur(10px);
  background: url(https://placeimg.com/640/480/tech);
  background-attachment: fixed;
  background-size: 100vw auto;
}

p {
  margin: auto;
  padding: 20vh 10vh;
  /*background:white; if needed */
  position: relative;
  z-index: 1;
  font-size: calc(10px + 2vw);
  border:solid 1px;
  border-radius:1em;
  overflow:hidden;
  box-shadow:2px 2px 2px
}

<p> is this backdrop alternative do the job ? </p>