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

问题描述：

我想通过在Dream Weaver CS5中使用级联样式表为我的网页添加背景。我很幸运找到这段代码：使用Dreamweaver在CSS中设置背景颜色

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。

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

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

为什么不使用'背景图像：网址（ 'background.jpg' ）;在'body' CSS还是在'＃wrapper'中？ – 2013-03-06 10:04:36

背景图像的问题是背景大小尚未得到广泛支持。我假设他想要一张全屏拉伸的图像。 – 2013-03-06 10:06:32

答

我认为它确实工作正常，因为position:fixed;将图像从页面流中拉出。我认为你的罪魁祸首实际上是规则#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); 
}

不错，我可以踢自己！因此，在Dreamweavers设计视图中查看时，看起来添加的元素无法显示为页面的一部分！疯狂感谢您的全新视角。我很感激。 :)你拯救了生命。 :) – 2013-03-06 10:28:23

不确定，我没有在10年内使用过Dreamweaver：P记住如果它解决了问题，请按下打勾以接受答案。 – 2013-03-06 10:29:48

再次完成thanx的工作m8。 :) – 2013-03-06 10:33:21

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

相关推荐