0

我正在尝试通过在 Dream Weaver CS5 中使用级联样式表为我的网页添加背景。我有幸找到了这段代码：

html, body {height: 100%; width: 100%; padding: 0; margin: 0;}

#full-screen-background-image {z-index: -999; min-height: 100%; min-width: 1024px; width: 100%; height: auto; position: fixed; top: 0; left: 0;}

#wrapper {position: relative; width: 800px; min-height: 400px; margin: 100px auto; color: #333;}

哪个被添加到样式表中，这个位：

<body>
  <img alt="full screen background image" src="/background.jpg" id="full-screen-background-image" /> 
  <div id="wrapper">
    <p>Content goes here...</p>
  </div>
</body>

它被添加到 HTML 中。

但是，每当我尝试向页面添加另一个元素（例如图像或文本）时，图像就会直接出现在我设置的背景下方，就好像样式表中的代码根本没有设置背景一样。

有人能告诉我我做错了什么吗？

4

1 回答 1

1

我认为它实际上工作正常，因为position:fixed;将图像从页面流中拉出来。我认为你的罪魁祸首实际上是margin: 100px auto;规则#wrapper。

我玩了一下你的 CSS 并清理了它。这是期望的结果吗？

参见 jsFiddle

html, 
body {
    height: 100%; 
    width: 100%; 
    padding: 0; 
    margin: 0;
}

#full-screen-background-image {
    z-index: -999; 
    position: fixed; 
    top: 0; 
    left: 0;
    right: 0;
    bottom: 0;
    background-color:#F00;
}

#wrapper {
    position: relative; 
    width: 800px; 
    /*margin: 100px auto; */
    color: #333;
}

或者，如果您不需要背景缩放/拉伸，您可以使用这个：

body {
    background-image: url(/background.jpg);
}
于 2013-03-06T10:05:25.753 回答