模糊背景圖像，但不是該圖像上的形狀

Question

有三件重要的事情：

1. 背景圖片
2. 背景圖像上的矩形形狀
3. 矩形內的文字

背景圖像，考慮一本書，上面有一些標題，並且該標題與書的中心對齊。 假設我在該文本上繪制了一個矩形形狀，以便文本可以適合矩形形狀。 我只想模糊矩形外的區域，以便正確看到矩形內的區域。 那么有沒有可能做到……？

像這樣的東西： 示例圖像 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>