javascript - 模糊背景图像， overflow hidden ，与父 div 对齐

Question

我对此做了一些研究，但没有一个答案能帮助我解决我的问题。这是一个 JSFiddle展示我到目前为止所拥有的。

问题:

• 我遇到了溢出问题，如您所见背景图像溢出 wrapper 。

• 下一期，背景图片看起来不会自动填充到包装宽度。我假设当溢出问题是修复了这可能不再是问题。

• 最后，当我们可以解决所有问题时，有没有办法让包装器扩展到背景图像的高度而不具体自己设置高度。

这是我的代码:

#wrapper {
    margin: 0 auto;
    width: 70%;
    border: #000000 solid 1px;
    overflow: hidden !important;
}
.content:before {
  content: "";
  position: fixed;
  z-index: -1;
  background-image: url(../images/10034277536_1454f4e382_background.jpg);
  background-repeat: no-repeat;
  width: 100%;
  height: 100%;
  filter: blur(3px);
    -webkit-filter: blur(3px);
       -moz-filter: blur(3px);
        -ms-filter: blur(3px);
         -o-filter: blur(3px);
}

.content {
  z-index: 0;
}

<div id="wrapper">
    <div class="content">
    Hello world
    </div>
</div>

感谢您的帮助。

Answer 1

看看:https://jsfiddle.net/5mahg3fp/

.content {
    position: relative;
    background-size: cover;
 }

.content:before {
  position: absolute;
}

相对于 #content 绝对而不是固定和相对定位元素将解决您的第一个问题。

将 backgrund-size 设置为 cover 使背景增长到元素的大小。

要让元素自动增长到指定背景的大小，您必须将背景作为实际图像插入，静态定位。您可以将您的内容添加到覆盖整个区域的绝对定位的 child 。