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

2023年6月9日 184次阅读

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

情况：

>身体有一个非固定的背景图像,可以垂直和水平重复.
>应该在第一个上面放置第二个透明背景图像.

约束：

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

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

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

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