CSS如何实现blurred-box元素继承背景图中心位置适配多分辨率

问题根因 #

1. body背景的background-position属性设置为top，未实现全局背景居中
2. .blurred-box的伪元素定位逻辑错误，继承的背景与全局背景位置错位，导致仅展示背景角落区域

修改后的代码 #

CSS部分 #

* {
  margin: 0;
  padding: 0;
}

html {
  width: 100vw;
  height: 100vh;
}

body {
  background-repeat: no-repeat;
  background-attachment: fixed;
  background-size: cover;
  background-position: center; /* 此处将top改为center，实现全局背景居中 */
  background-image: url(https://images.unsplash.com/photo-1477346611705-65d1883cee1e?dpr=0.800000011920929&auto=format&fit=crop&w=1199&h=800&q=80&cs=tinysrgb&crop=);
  width: 100%;
  height: 100%;
  font-family: Arial, Helvetica;
  letter-spacing: 0.02em;
  font-weight: 400;
  -webkit-font-smoothing: antialiased;
}

.blurred-box {
  position: fixed;
  width: 550px;
  height: 670px;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  background: inherit;
  border-radius: 2px;
  overflow: hidden;
}

.blurred-box:after {
  content: '';
  /* 尺寸改为视口大小+模糊溢出量，覆盖全视口 */
  width: calc(100vw + 30px);
  height: calc(100vh + 30px);
  background: inherit;
  position: absolute;
  /* 调整偏移量，让伪元素背景和全局背景完全对齐 */
  left: calc(-50vw + 50%);
  top: calc(-50vh + 50%);
  box-shadow: inset 0 0 0 200px rgba(255, 255, 255, 0.05);
  filter: blur(10px);
}

.user-login-box {
  position: relative;
  margin-top: 50px;
  text-align: center;
  z-index: 1;
}

.user-login-box>* {
  display: inline-block;
}

HTML部分（无修改） #

<div class="blurred-box">
  <div class="user-login-box">
    <h1>text here</h1>
  </div>
</div>

实现原理 #

因为body的背景设置了background-attachment: fixed，背景定位基准是整个视口而非body元素本身。调整伪元素的位置让其和视口完全重合后，继承的背景就会和全局背景完全对齐，不管盒子尺寸、分辨率如何变化，盒子内都会展示背景的居中区域。

内容的提问来源于stack exchange，提问作者User