Javascript 模糊背景图像，溢出隐藏，与父div对齐

我对此做了一些研究，但没有一个答案对我的问题有帮助。下面是一个例子来展示我到目前为止所拥有的

问题：

• 我有一个问题，当它涉及到溢流，正如你所看到的 背景图像溢出包装器

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

• 最后，当我们可以解决所有问题时，有没有办法使 包装器延伸到背景图像的高度，而没有 特别是我自己设定的高度

这是我的密码：

#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>

#包装器{
保证金：0自动；
宽度：70%；
边框：#000000实心1px；
溢出：隐藏！重要；
}
.内容：以前{
内容：“；
位置：固定；
z指数：-1；
背景图像：url（../images/10034277536_1454f4e382_background.jpg）；
背景重复：无重复；
宽度：100%；
身高：100%；
过滤器：模糊（3px）；
-webkit过滤器：模糊（3px）；
-moz过滤器：模糊（3px）；
-ms过滤器：模糊（3px）；
-o-过滤器：模糊（3px）；
}
.内容{
z指数：0；
}
你好，世界

---

感谢您的帮助。

您可以使图像看起来在整个页面上溢出，在图像底部添加渐变色（例如

d7e

），然后将背景色设置为渐变色

background: #029d7e url("http://iforce.co.nz/i/gvudoqvz.ago.png") repeat-x;

---

如果您希望子元素与父元素一起增长，则需要使用

高度

属性标记这两个元素（要么

100%

要么固定

高度

）。

您可以使图像在整个页面上溢出，在图像底部添加渐变（例如

\029d7e

），然后将背景色设置为渐变色

background: #029d7e url("http://iforce.co.nz/i/gvudoqvz.ago.png") repeat-x;

如果希望子元素与父元素一起增长，则需要使用

height

属性标记这两个元素（要么

100%

，要么固定

height

）。

请查看：

将元素定位为绝对而非固定且相对于

#内容

将解决您的第一个问题

将

background size

设置为

cover

会使背景增大到元素的大小

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

请查看：

将元素定位为绝对而非固定且相对于

#内容

将解决您的第一个问题

将

background size

设置为

cover

会使背景增大到元素的大小

---

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

最好创建一个小提琴或其他东西，因为您的图像现在无法加载，而且我们看不出有什么问题。@ChrisG Oh srry，我正在考虑这个问题。我在上面，让我知道你什么时候完成：）。另外，在你原来的帖子中加入小提琴链接。那要干净得多way@ChrisG好的，全部编辑到post中，用实际图像（

）替换背景图像，以解决项目符号3。最好创建一个小提琴或其他东西，因为您的图像现在无法加载，我们看不出有什么问题。@ChrisG Oh srry，我正在考虑这个问题。我在上面，让我知道你什么时候完成：）。另外，在你原来的帖子中加入小提琴链接。那要干净得多way@ChrisG确定全部编辑到post中用实际图像（

）替换背景图像以解决项目符号3。感谢您的响应，这对图像有效，但对模糊效果无效@Stefan Dochow对我要找的东西有很好的回应。谢谢你的回应，这对图像有效，但对模糊效果无效@Stefan Dochow对我所寻找的有很好的回应。