模糊背景图像，但保持图像聚焦在框区域

Question

有谁知道 css/javascript 技术可以执行以下操作：全屏背景图像模糊，但浮动固定，该图像的一部分不模糊，但该部分保持居中，并且在浏览器窗口调整大小时大小相同。背景图像需要随浏览器窗口调整大小，但聚焦部分需要保持居中并具有相同的框大小，而其剪切的背景图像与模糊背景一起调整大小。请参阅示例图片。必须跨浏览器兼容。

Answer 1

尝试使用两个元素（在两个元素上使用相同的背景图像），但在两个元素上都设置background-attachment为fixed。

html,
body {
  width: 100%;
  height: 100%;
  margin: 0;
}

.blur-group {
  position: relative;
  width: 100%;
  height: 100%;
}

.blurred,
.unblurred {
  background: url('//placekitten.com/1000/750') 50% 50% no-repeat;
  background-size: cover;
  background-attachment: fixed;
}

.blurred {
  width: 100%;
  height: 100%;
  filter: blur(7px);
}

.unblurred {
  width: 400px;
  height: 300px;
  position: absolute;
  top: 50%;
  left: 50%;
  margin-left: -200px;
  margin-top: -150px;
  border: 10px solid white;
}

<div class="blur-group">
  <div class="blurred"></div>
  <div class="unblurred"></div>
</div>