Question

我知道已经一遍又一遍地问过类似的问题，但我还没有找到一个对我有用的解决方案。请注意以下问题。

情况：

正文有一个非固定的背景图像，可以垂直和水平重复。
应该在第一个上面放置第二个透明背景图像。

约束：

第二个背景应该在文档中伸展，就像身体上的背景一样。记住：不只是视口，整个文档。
即使身高小于文档高度（即没有滚动条），第二个背景也必须延伸到视口的底部（因此任何使用100％html和/或身高的解决方案都是不可能的）。
第二个背景的位置无法修复，因为在滚动时会产生某种视差效果。必须坚持两个图像实际上是一个的错觉。
身体可能有边缘和/或填充物。无论如何，这两个背景都应涵盖整个文档。
出于向后兼容的原因，不能在正文上使用第二张背景图片（“background-image: url(), url();”）。
没有JavaScript。
显然，没有将两张图片合并为一张。：）

我已经对这个问题进行了一段时间的研究并得出结论，仅使用HTML和CSS2是不可能的。我非常希望被证明是错的。

Answer 1

您应该为两个单独的背景图像放置一个覆盖整个文档的背景图像：

<html>
<head>
<style>
.firstbackground {
 position:absolute;
 left:0;
 top : 0;
 width : 100%;
 min-height : 100%;
 background: url('first.png') repeat;
}
.secondbackground {
 width : 100%;
 min-height : 100%;
 background:url('second.png'); /* may be transparent, but why add a background then ;-) */
}
</style>
</head>
<body>
 <div class="firstbackground">
  <div class="secondbackground">

  long content

  </div>
 </div>


</body>
</html>

Answer 2

CSS3允许用逗号分隔的多个背景，例如：

background: url('topNonFixedBG.png'), #000 url('mainBG.png') no-repeat fixed top center;

Answer 3

http://jsfiddle.net/hs2WT/1/

只需使用多个div ......

CSS：

html {
    height: 100%;
}
body { height: 100%;}

.wrapper1 {
    width: 100%;
    height: 100%;
    background: url('http://khill.mhostiuckproductions.com/siteLSSBoilerPlate//images/nav/hixs_pattern_evolution.png');
}

.wrapper2 {
    width: 100%;
    height: 100%;
    background: url('http://khill.mhostiuckproductions.com/siteLSSBoilerPlate//images/nav/yellow1.png');
}

.content { color: #fff; }

HTML：

<div class="wrapper1">
    <div class="wrapper2">
        <div class="content">
            <p>Some Content</p>
        </div>
    </div>
</div>

Answer 4

让第二个背景具有位置：绝对;

body{
 background:url("http://jsfiddle.net/css/../img/logo.png") #000;
}
#secBg{
 background:url("http://placehold.it/350x150") ;
 position:absolute;
 min-height:500%;
 min-width:100%;

}

<html>
<body>
<div id="secBg">
</div>
</body>
</html>

http://jsfiddle.net/5sxWB/

将一个完整文档背景图像放在另一个上

4 个答案: