模糊背景图像，但不是该图像上的形状

Question

有三个重要的事情：

1. 背景图片
2. 背景图片上的矩形形状
3. 矩形内的文字

背景图片，考虑一本书，上面有一些标题，并且标题与书的中心对齐。 假设我在该文本上绘制了一个矩形形状，以便文本可以适合矩形形状。 我只想模糊矩形外的区域，以便正确看到矩形内的区域。 那么有没有可能做到……？

类似这样的东西：Sample Image url

<div class="container>

   <div class="shape"></div>

   <img src="image url" ></img>

</div>

Answer 1

.container{
  width: 700px;
  height: 500px;
  position: relative;
}
.container:after{
  content: '';
  position:absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background:     url("https://cdn.pixabay.com/photo/2015/06/19/21/24/the-road-815297_960_720.jpg");
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center;
  z-index: 0;
  filter: blur(10px);
}
.shape{
  position:absolute;
  top: 50%;
  left: 50%;
  width: 50%;
  height: 50%;
  transform: translate(-50%, -50%);
  
  background:     url("https://cdn.pixabay.com/photo/2015/06/19/21/24/the-road-815297_960_720.jpg");
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index:1;
}
.shape p{
  color: white;
  font-size: 22px;
  text-transform: uppercase;
}

<div class="container">
   <div class="shape">
    <p>Text inside Rectangle</p>
   </div>
</div>