html - 背景模糊的聚焦广场

Question

我正在用 ReactJS 开发一个项目，我需要在 div 的背景中集成一个视频。现在我在背景顶部有一个 div，它按原样显示视频，但背景的其余部分需要模糊，有点像这样。有什么办法可以使用 CSS 做到这一点吗？

标签： htmlcssreactjs

Answer 1

是的，在绝对填充父元素以充当背景的元素上使用filter CSS 属性。

html,
body {
  margin: 0;
  padding: 0;
}

.filter-demo__main {
  position: relative;
  width: 100vw;
  height: 100vh;
  display: flex;
  justify-content: center;
  align-items: center;
  overflow: hidden;
}

.filter-demo__bg {
  /* You'll have to keep this and the img src in sync*/
  background-image: url("https://placeimg.com/640/480/nature");
  background-size: cover;
}

.filter-demo__bg {
  position: absolute;
  z-index: 1;
  /*
   * The negative values of top, right, bottom, left are to
   * account for the "bleeding" effect of the underlying element's
   * color showing through.  Set them to 0 to see what I mean.
   * Their values should about the negative value whatever you feed
   * the blur().
   */
  filter: blur(10px);
  top: -20px;
  right: -20px;
  bottom: -20px;
  left: -20px;
}

.filter-demo__actual {
  z-index: 2;
  border: 10px solid white;
  max-height: 50%;
  max-width: 50%;
}

<div class="filter-demo__main">
  <div class="filter-demo__bg"></div>
  <!-- Make sure the img src is the same as the background image for the filter-demo__bg -->
  <img class="filter-demo__actual" src="https://placeimg.com/640/480/nature" alt="A placeholder image of nature" />
</div>