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

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

css

Css 将一个完整文档背景图像放置在另一个背景图像上,css,background,Css,Background,我知道类似的问题已经被问了一遍又一遍，但我还没有找到一个真正适合我的解决方案。想象一下下面的问题情况：主体具有垂直和水平重复的非固定背景图像应该有第二个透明的背景图像放在第一个上面限制条件：第二个背景应该延伸到整个文档，就像主体上的背景一样。注意：不仅仅是视口，还有整个文档即使正文高度小于文档高度（即没有滚动条），第二个背景也必须延伸到视口底部（因此，任何使用100%html和/或正文高度的解决方案都是不可能的）第二个背景的位置不能固定，因为滚动时会产生某种视差效果。必须坚持

我知道类似的问题已经被问了一遍又一遍，但我还没有找到一个真正适合我的解决方案。想象一下下面的问题

情况：

主体具有垂直和水平重复的非固定背景图像
应该有第二个透明的背景图像放在第一个上面

限制条件：

第二个背景应该延伸到整个文档，就像主体上的背景一样。注意：不仅仅是视口，还有整个文档
即使正文高度小于文档高度（即没有滚动条），第二个背景也必须延伸到视口底部（因此，任何使用100%html和/或正文高度的解决方案都是不可能的）
第二个背景的位置不能固定，因为滚动时会产生某种视差效果。必须坚持认为两个图像实际上是一个的错觉
车身可能有边距和/或衬垫。不管怎样，这两种背景都应该覆盖整个文档
出于向后兼容性的原因，在正文上使用第二个背景图像（“
```
背景图像：url（），url（）；
```
”）不是一个选项
没有JavaScript
显然，没有将两幅图像合并为一幅

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

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

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

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

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


.第一个背景{
位置：绝对位置；
左：0；
排名：0；
宽度：100%；
最小高度：100%；
背景：url（'first.png'）重复；
}
.第二背景{
宽度：100%；
最小高度：100%；
背景：url（'second.png'）；/*可能是透明的，但为什么要添加背景；-）*/
}
长内容

只需使用多个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; }

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

HTML:

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; }

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


一些内容

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

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%;

}

除此之外，z-index是基于顺序的，第一个是最高的。这将在几年前与旧浏览器或移动浏览器不兼容……在我的iPhone 4S上运行良好，适用于Safari和Chrome。太棒了！（当然，iphone工作正常……我想到的是IE9、8、7的可怜用户……）正如Stéphane指出的那样，出于兼容性原因，无法使用此解决方案。这也是我发布的限制条件之一。：）不过，谢谢！当然，第二个背景必须是透明的，你可以使用z-index来确保它始终位于顶部。如果主体没有边距或填充，这将是一个很好的解决方案。然而，这种可能性是存在的，尽管我忘了在约束中提到它。补充说。无论如何谢谢你！您可以在上添加所需的填充或边距，并将标记的填充/边距保留为零。为什么在body标签上需要边距和填充？这是您可以覆盖的唯一默认值：“第二个背景必须延伸到视口底部”是什么意思？如果视口扩展，这是因为内容在中扩展，因此如果png足够大，附加的背景将遵循div大小。。。已解决（？）高度：100%仅在内容不够大时提供默认高度…您当前的解决方案是迄今为止最好的解决方案，因为它涵盖了除填充/边距问题之外的所有问题（这就是为什么我投了更高的票，但没有被标记为公认的答案——我怀疑会有很多其他人不得不解决身体填充/边缘可变的问题）。但是，我不能设置负的填充或边距，因为在加载页面之前，这些值是未知的。我必须使用JavaScript，不幸的是，这不是一个选项。不过，感谢大家！与Stéphane发布的解决方案相同，同样的问题。：）这只会将背景拉伸到视口的边界。如果页面本身超出此范围，向下滚动将留下第二个背景。oobs！将最小高度更改为最小高度：500%；这将导致文档比内容高得多，使您可以向下滚动到文档之外，或者-如果内容比视口高度的500%高-与以前相同的问题。不幸的是，任意设置高度没有帮助。：）