将绝对定位的图像放在我的页面上

在此网站上我有一个自动调整大小的BG，但我希望在页面底部有一个固定的黑色条。将绝对定位的图像放在我的页面上

当浏览器最大化时，网站看起来很好，但是当您缩小窗口并向下滚动黑条时，几乎完全消失，看起来很乱。它没有正确定位。

我已经尝试了一些东西，但无法找出解决方案。有没有人有任何想法我应该怎么做呢？（也许我错过了一件小事，或许我需要从头开始，无论哪种方式请帮助！）

注意：auto尺寸的背景是在html标签中，而黑底部的横条在它自己的独立div标签“#black_bottom”

http://graves-incorporated.com/test_sites/gm_2012/

2012-01-04 Dan Graves

好了，我想我看到你要什么了。如果我的理解是正确的，那么您需要将渐变背景延伸到内容框底部边缘上方约70-73像素的位置，并将其与满足延伸至窗口底部的实心灰色条或其下方的圆形G徽章，以较低者为准。我通过完成了此操作，完全删除#black_bottom元素，为html元素设置纯色背景色以匹配底部条形图的颜色，并将圆形渐变背景应用于body元素。我还从#wrapper中删除了明确定义的高度，并给出了一个负面的margin-bottom以允许黑色条形低于它。下面列出了我替换的样式。希望这更接近你之后的东西：

html { 
    background: #333; 
} 

body { 
    background: url(http://graves-incorporated.com/test_sites/gm_2012/images/bg.jpg) no-repeat center center fixed; 
    background-size: cover; 
    height: 100%; 
} 

#wrapper { 
    width: 960px; 
    margin: 0 auto -136px; 
    top: 20px; 
    position: relative; 
}

来源

2012-01-04 05:57:19 Aaron

当我这样做，它不起作用 – 2012-01-04 08:17:37

我刚刚意识到我忘了添加'＃black_bottom'和'位置：相对;'到包装'z-index：-1'。我在我的答案中编辑了样式定义以包含它们。此外，您需要进入您的HTML并确保您正确关闭所有标签。 '＃wrapper'在'＃black_bottom'的*里面，它应该*在*之前。 – Aaron 2012-01-04 16:25:25

*还有'min-height：100％;'到'＃wrapper' – Aaron 2012-01-04 16:28:16

你有一切包裹不正确，我相信。为什么<div id="black_bottom>包含从包装到<div id="footer_wrap">的所有内容？

来源

2012-01-04 05:58:38

在firts，我没有把它包裹在一切，但它没有显示出来，所以我把它包装一切，它出现了。我不明白为什么，但它似乎工作，所以我去了。我该如何解决这个问题？ – 2012-01-04 08:18:52

刚删除height:100%从#black_bottom使absolute:position div height auto。

来源

2012-01-04 06:34:50 sandeep

谢谢你的工作，我知道我过去看起来很简单！ – 2012-01-04 07:52:55

其实这并不能解决问题。当你使浏览器更薄时，你必须滚动到一边它不会填满底部100％.... – 2012-01-04 08:17:15

将绝对定位的图像放在我的页面上

回答

相关问题