4

我知道类似的问题已经被反复询问，但我还没有遇到真正适合我的解决方案。想象一下下面的问题。

情况：

  • 正文具有垂直和水平重复的非固定背景图像。
  • 应该有第二个透明背景图像覆盖第一个。

约束：

  • 第二个背景应该横跨文档，就像正文上的背景一样。注意：不仅仅是视口，还有整个文档。
  • 即使正文高度小于文档高度（即没有滚动条），第二个背景也必须延伸到视口的底部（因此任何使用 100% html 和/或正文高度的解决方案都是不可能的）。
  • 第二个背景的位置不能固定，因为这会在滚动时产生某种视差效果。必须维护两个图像实际上是一个的错觉。
  • 正文可能有边距和/或填充。无论如何，两种背景都应涵盖整个文档。
  • background-image: url(), url();出于向后兼容性的原因，不能在正文 (" ") 上使用第二个背景图像。
  • 没有 JavaScript。
  • 显然，实际上没有将两个图像合并为一个。:)

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

4

4 回答 4

2

You should place a background image for two separate which covers each the whole document :

<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>
于 2013-03-20T13:28:27.833 回答
0

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

background: url('topNonFixedBG.png'), #000 url('mainBG.png') no-repeat fixed top center;
于 2013-03-20T13:27:37.097 回答
0

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>
于 2013-03-20T13:39:31.430 回答
0

让第二背景有位置：绝对；

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/

于 2013-03-20T13:41:34.027 回答