Question

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

问题：

我遇到过流问题，你可以看到背景图像溢出包装。
下一期，背景图片看起来不是自动填充包装纸的宽度。我假设当溢出问题出现时修复了这可能不再是问题了。
最后，当我们能解决所有问题时，是否有办法解决问题包装器延伸到背景图像的高度而没有特别是自己设定身高。

这是我的代码：

#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会使背景增长到元素的大小。

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

Answer 2

您可以看到图片溢出整个页面，在图片底部添加渐变（例如#029d7e），然后将背景颜色设置为渐变。

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

https://jsfiddle.net/24wkdof5/

如果您希望子元素与父元素一起增长，则需要使用height属性（100%或固定height）标记这两个元素。

模糊背景Img，隐藏溢出，与父div对齐

2 个答案: