logo标签列表

在另一张全文档背景图片上方放置一张背景图片

cssbackground
4

我知道类似的问题已经被反复提出，但是我还没有找到一个适用于我的解决方案。请看以下问题。

情况：

  • 页面有一个非固定的背景图像，可在垂直和水平方向上重复显示。
  • 应该在第一张图片之上放置第二个透明的背景图片。

约束条件：

  • 第二个背景应该延伸到整个文档，就像页面的背景一样。注意：不仅是视口，整个文档都需要这样。
  • 即使页面高度小于文档高度（即没有滚动条），第二个背景也必须延伸到视口底部（因此任何使用100% html和/或body高度的解决方案都行不通）。
  • 第二个背景的位置不能固定，因为这会在滚动时产生某种视差效果。必须保持两个图像实际上是一个的错觉。
  • 页面可能具有边距和/或填充。两个背景应该覆盖整个文档。
  • 由于向后兼容性原因，不允许在body上使用第二个背景图像（“background-image: url(), url();”）。
  • 不使用 JavaScript。
  • 显然，不能将两个图像合并成一个。 :)

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

4个回答
2
您应该为两个单独的
元素设置背景图像，以覆盖整个文档：
<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>
如果body没有margin或padding，这将是一个很好的解决方案。然而，这种可能性存在，尽管我在限制条件中忘记提到它了。已经添加了。无论如何，谢谢！ - Martin Denk
您可以在<div class="secondbackground">上添加所需的填充或边距，并将<body>标签的填充/边距保留为零。为什么需要在body标签上使用margin和padding？这只是默认值，您可以进行覆盖。 - Stéphane V
你的解决方案解决了第二个背景需要延伸到视口底部的问题，没错！ - Martin Denk
编辑了我的答案，使用position:absolute来独立于<body>标签的边距和填充。请尝试一下。请注意，我将“your content”移动到<div>标签下面。 - Stéphane V
1
你目前的解决方案是迄今为止最好的，因为它涵盖了所有的问题，除了填充/边距问题（这就是为什么我已经投票但没有将其标记为接受答案 - 我怀疑会有很多其他人需要解决身体填充/边距可变的问题）。然而，我无法设置负填充或边距，因为这些值在页面加载之前是未知的。我必须使用JavaScript，但不幸的是这不是一个选项。非常感谢您！ - Martin Denk
显示剩余5条评论
0

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

background: url('topNonFixedBG.png'), #000 url('mainBG.png') no-repeat fixed top center;
1
此外，z-index是基于顺序的，越先的层级越高。 - advermark
这将在几年内无法与旧版浏览器或移动浏览器兼容。 - Stéphane V
在我的 iPhone 4S 上，无论是 Safari 还是 Chrome，都可以正常工作。 - advermark
太好了！（当然，iPhone 正常工作...我在想 IE9、8、7 的可怜用户...） - Stéphane V
这个解决方案由于兼容性问题无法使用，正如Stéphane所指出的那样。它也是我发布的限制之一。:) 谢谢！ - Martin Denk
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>
和Stéphane发布的解决方案一样，问题也一样。 :) - Martin Denk
0

让第二个背景具有position:absolute属性;

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/

这将仅将背景拉伸到视口的边界。如果页面本身超出了这个范围，向下滚动将使第二个背景留在后面。 - Martin Denk
糟糕！将min-height更改为min-height:500%; - E P
这将导致文档比内容高得多，使您可以向下滚动远远超出它，或者 - 如果内容高度超过视口高度的500％ - 与之前相同的问题。任意设置高度不起作用，不幸的是。 :) - Martin Denk
网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接