Question

我希望我的页面有两个背景图像：一个在顶部，一个在底部。不过，我不希望它们是静态的。我该怎么做？

Answer 1

制作两个具有零边距和填充的嵌套图层，如下所示：

<div class="outer">
  <div class="inner">
    <!-- Page goes here. -->
  </div>
</div>

然后有一个单独的背景图像用于外部和内部，一个固定在顶部，一个固定在底部：

.outer {
  background-position: bottom;
  // ...
}

.inner {
  background-position: top;
  // ...
}

Answer 2

这实际上取决于您需要页面看起来像什么以及背景图像是什么。如果你想要一个解决方案，你需要发布更多的细节，最好是一个页面应该是什么样的合成图像，以及它们自己的图像示例。

说一种方式可能是：

html {backgoround: trasnparent url(/path/to/image) scroll no-repeat top center;}
body {backgoround: trasnparent url(/path/to/other-image) scroll no-repeat bottom center;}

Answer 3

将div与背景图像一起使用，并使用您的布局或定位属性正确放置它们。你可以把它作为顶部的一个，把它放在一个绝对定位的div中，并且z-indexed在你的常规页面下面。然后另一个可以放在体型中并放在底部。

两个单独的背景图像

3 个答案: