CSS 分层背景

Question

尝试使用具有不同 z 索引的三个背景会导致仅显示一层。

This jsfiddle有相关的代码和示例(减去巨大的基础 css 文件......没有它，行为不会改变)。

失败的类是

skyline

和

#footer_container

而 #header_container 运行正常。

Answer 1

我已经更新了你的 fiddle here .

#footer-container由于您的 CSS 语法，没有显示其背景图片。由于您结合了背景图片 URL 和不重复，因此您需要使用 background速记而不是 background-image属性(property)。

检查此类事情的一个好方法是使用浏览器检查您的元素(在 Chrome 中:右键单击 > 检查元素)并找到未正确显示的元素。您会注意到 #footer-container 的背景图像属性由于语法错误，div 被 Chrome 从字面上划掉了。

您的 .skyline 中也存在一些语法问题类(class)。首先，你的body并且内部 div 有一个类 .skyline .这有点令人困惑，所以你应该删除它或在你的 CSS 中更具体，例如与 p.skyline , div.skyline等。正如您目前所写的那样，您的 body 和那个.skyline div 将获取背景图像。您也没有包含结束语 </body>标签。我假设您不希望该 div 和 body 上都有背景图片，所以我在更新的 fiddle 中删除了您的 body 标签。

此外，在您的 .skyline css，你有两个height: 546和 height: auto .首先，CSS 中的高度应该有一个特定的值(例如 px、em、%)。对于 <img src="img.jpg" height="546" /> ，然而，简单地把“546”作为它的高度就可以了。其次，每个类应该只有一个高度值。

天际线问题本身是因为您没有在第 126 行关闭大括号，所以根本没有对 .skyline 应用任何样式。 .一旦关闭，问题仍然存在。它没有宽度。因此，让我们将其设置为 100%。还是纳达。这是因为 .skyline的 parent div#container也是没有宽度的。所以让我们也给它一个 100% 的宽度。那我们就开始做生意了。

一个出色的文本编辑器可以突出显示语法错误，可以帮助您解决很多问题，尤其是当您刚刚起步时。