我对此做了一些研究,但没有一个答案能帮助我解决问题。这是一个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>
感谢您的帮助。
答案 0 :(得分:4)
查看:https://jsfiddle.net/5mahg3fp/
.content {
position: relative;
background-size: cover;
}
.content:before {
position: absolute;
}
将元素定位为绝对而不是固定且相对于#content
将解决您的第一个问题。
将backgrund-size
设置为cover
会使背景增长到元素的大小。
要让元素自动增长到指定的背景大小,您必须将背景作为实际图像插入,静态定位。您可以将您的内容添加到覆盖整个区域的绝对定位的孩子。
答案 1 :(得分:1)
您可以看到图片溢出整个页面,在图片底部添加渐变(例如#029d7e
),然后将背景颜色设置为渐变。
background: #029d7e url("http://iforce.co.nz/i/gvudoqvz.ago.png") repeat-x;
https://jsfiddle.net/24wkdof5/
如果您希望子元素与父元素一起增长,则需要使用height
属性(100%
或固定height
)标记这两个元素。