Question

我正在尝试使用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。

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

有人可能会告诉我自己可能做错了什么吗？

Answer 1

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

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

See on 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);
}

使用Dreamweaver在CSS中设置背景颜色

1 个答案: