在css背景图像封面中模糊部分背景[重复]

Question

我目前正在尝试模糊包含内容的 div 后面的背景图像。问题是，这应该是为了响应式设计，所以我需要在大盒子的背景图像上使用封面属性。我似乎无法将里面盒子里的图片和后面的图片匹配起来。我尝试将较大的框设为相对，但随后 overflow:hidden 在较小的框上不再起作用。

<div class="container">
  <div class="block">
    <div class="blur">

    </div>
    <div class="content">
      <h3>
       A bunch of stuff
      </h3>
      <p>
       This is supposed to be content.
      </p>
      <p>
       That the box will wrap around
      </p>
    </div>
  </div>
</div>

.container{
    background: url('https://i.imgur.com/Q13QJrB.jpg') no-repeat center center;
    background-size: cover;
    width: 100%;
    height: 100%;
    overflow: auto;
}

.block{
    width: 50%;
    margin: 30px auto 30px auto;
    box-shadow: 0px 0px 5px 0px rgba(0,0,0,0.40);
    position: relative;
}

.blur{
    background: url('https://i.imgur.com/Q13QJrB.jpg') no-repeat center center;
    background-size: cover;
    overflow: hidden;
    z-index: 50;
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    filter: blur(10px);
}

.content{
  width: 100%;
  height: 100%;
  z-index: 100;
  position: relative;
}

https://jsfiddle.net/hy0mvpec/30/

我在网上看到的大多数示例要么使用一些 JS 库，在这种情况下我不想使用它，要么使用绝对容器的固定高度，要么使用现代浏览器中根本没有实现的 CSS 属性。

编辑：因为人们似乎对我想要什么感到过度困惑；

我想让小盒子的背景模糊。大多数解决方案似乎将背景图像重新应用到较小的框并尝试使其与较大的框匹配，因此它看起来像一个无缝的图像。

我认为这个问题应该更多地涉及使背景图像无缝化，而不管显示器的大小。

Answer 1

不确定这是否是您的预期输出：检查更新的小提琴https://jsfiddle.net/nw3spoLz/

我在你的模糊 div 上添加了比例

.block{
    width: 50%;
    margin: 30px auto 30px auto;
    box-shadow: 0px 0px 5px 0px rgba(0,0,0,0.40);
    position: relative;
    overflow: hidden;
}

.blur{
    background: url('https://i.imgur.com/iKvNL2a.jpg') no-repeat center center;
    background-size: cover;
    overflow: hidden;
    z-index: 50;
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    transform: scale(2);
    filter: blur(10px);
}

.container{
    background: url('https://i.imgur.com/iKvNL2a.jpg') no-repeat center center;
    background-size: cover;
    width: 100%;
    height: 100%;
    overflow: auto;
}

.block{
    width: 50%;
    margin: 30px auto 30px auto;
    box-shadow: 0px 0px 5px 0px rgba(0,0,0,0.40);
    position: relative;
    overflow: hidden;
}

.blur{
    background: url('https://i.imgur.com/iKvNL2a.jpg') no-repeat center center;
    background-size: cover;
    overflow: hidden;
    z-index: 50;
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    transform: scale(2);
    filter: blur(10px);
}

.content{
  width: 100%;
  height: 100%;
  z-index: 100;
  position: relative;
}

<div class="container">
  <div class="block">
    <div class="blur">

    </div>
    <div class="content">
      <h3>
       A bunch of stuff
      </h3>
      <p>
       This is supposed to be content.
      </p>
      <p>
       That the box will wrap around
      </p>
    </div>
  </div>
</div>