Question

基本上，现在我有多个图像，但只有一个作为背景图像到我的身体（是一个蓝色方块），我需要在页脚的开头结束，所以在页脚下方是黑色但无论如何我做了什么，似乎没什么帮助。

这是一个例子http://bit.ly/1nKIee1（在postimage上）

我想也许如果我结束了body标签，然后启动了页脚标签就不会这样做了，但这似乎没有解决任何问题。

CSS

.nav {
  background-image: url(image/top.png);
  background-repeat: repeat-x;
}

body {
  background-image: url(image/blue.png);
  background-repeat: repeat;
  background-size: contain;
  background-color: #000000;
}

footer {
  background-image: url(image/footer.png);
  background-repeat: repeat-x;
  background-color: #000000;
  font-size: 14px;
  text-decoration: none;
  text-shadow: #000000 1px 1px;
  padding: 45px;
}

提前致谢 - 害羞♥

Answer 1

不要给身体提供背景属性，而不是使用div内部的div到页脚，并将这些属性赋予该div，例如

HTML：

<nav>......</nav>
<div class="container">......</div>
<footer>.........</footer>

CSS：

.nav {
  background-image: url(image/top.png);
  background-repeat: repeat-x;
}

container {
  background-image: url(image/blue.png);
  background-repeat: repeat;
  background-size: contain;
  background-color: #000000;
}

footer {
  background-image: url(image/footer.png);
  background-repeat: repeat-x;
  background-color: #000000;
  font-size: 14px;
  text-decoration: none;
  text-shadow: #000000 1px 1px;
  padding: 45px;

}

Answer 2

如果你为整个身体设置背景，它将适用于整个身体...... 并且你不能在身体外放置一个页脚（或者显示的内容）。

我想在你的情况下我会创建一个div＃pageContainer来放置你的页面内容，并将蓝色背景应用于它

div#pageContainer {
  background-image: url(image/blue.png);
  background-repeat: repeat;
  background-size: contain;
  background-color: #000000;
}

这是jsfiddle。

需要背景图像以在页脚开始时结束重复

2 个答案: