Question

好吧，我想在这个网站上有一个冷却的平铺背景。 http://www.leeslights.com/colors-shapes-sizes-and-prices.html
我如何制作它以使图像平铺到浏览器，但一旦它完成它将变为静态，就像背景是这个网站。 http://www.worshipatthemountaintop.org/

Answer 1

我认为最简单的解决方案是为页面背景创建一个单独的div，其中包含固定位置和完整视图大小。这是Pen

HTML：

<div class="background"></div>
<div class="content">
  <h1>Lorem ipsum dolor sit.</h1>
  <p>Lorem ipsum dolor sit amet.</p>
  <!-- and any other page content -->
</div>

CSS：

div.background {
  position: fixed;
  top: 0;
  z-index: -100;
  background-image: url("http://lorempixel.com/200/200/abstract/6/");
  background-size: tiled;
  width: 100%;
  height: 100vh;
}

内容的一些样式：

div.content {
  background: white;
  width: 80%;
  padding: 20px;
  margin: 40px auto 60px auto;
}

Answer 2

以下代码可以使用，它适用于平铺的星形图像网站，只需用您自己的图像替换括号中的内容

background:url('ewExternalFiles/space_bg.gif')repeat fixed center;

特殊页面背景 - 静态，平铺

2 个答案: