Question

我目前正在尝试模糊包含内容的div后面的背景图像。问题是，这应该是响应式设计，因此我需要在较大盒子的背景图像上使用cover属性。对于我来说，似乎没有办法将框中的图像与后面的图像进行匹配。我尝试过使相对较大的盒子相对，但是然后溢出：在较小的盒子上隐藏不再起作用。

<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属性。 / p>

编辑：由于人们似乎对我想要的东西过于困惑；

我希望模糊小方框的背景。多数解决方案似乎将背景图像重新应用到较小的框上，并尝试使其与较大的框匹配，因此看起来像是无缝图像。

我认为，无论显示器的大小如何，这个问题都应该与使背景图像变得无缝有关。

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>

在CSS背景图像封面中模糊背景的一部分

1 个答案: