背景模糊的聚焦正方形

问题描述

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

解决方法

是的，请在元素上使用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>

html reactjs reactjs