隐藏透明标题下的滚动内容答案

【问题标题】：Hide Scrolling Content Under Transparent Header隐藏透明标题下的滚动内容
【发布时间】：2012-05-23 09:44:59
【问题描述】：

好吧，我已经发疯了，正在寻找答案。这很简单，我知道。

我的页面顶部有一个固定的透明标题。当我滚动时，我希望正文内容在它下面滚动，但不能通过标题 div 看到。我看过类似的帖子，但对我的情况没有任何帮助。欣赏任何可以提供帮助的提示或线索。谢谢！

以下示例： thnki.com/hosting/sycamore

【问题讨论】：

透明度的全部意义在于能够看到它下面的内容。为什么还要透明？
它是透明的，因为我使用的是 background:url() 属性。我希望 body{background} 显示出来。看看链接，你会看到:)
请在此处查看我的解决方案：The Solution

标签： html header scroll hide transparent

【解决方案1】：

您将需要：

制作一个看起来和现在一样的非透明图像，
为页面下部（直接在页眉下方/之后）创建一个具有自己溢出样式设置的 div，这将导致滚动条只是页面的一部分
或者只是享受您获得的超棒的透明叠加效果。

我喜欢它实际上的样子

【讨论】：

是的，我会“制作一个看起来和现在一样的非透明图像”
谢谢@kristian - 你的第二个建议也是我的想法。谢谢！

【解决方案2】：

我已经阅读了许多在顶部栏下隐藏正文的相关示例。但是，我无法在我的情况下使用它。我找到了一个在线简单的工作示例。你可能想看看：

http://www.pmob.co.uk/temp/fixed-header-footer-left-new.htm

我的相关 CSS 配置是： * 你可能注意到我已经声明了 top/bottom/left/right/height 以及相对位置，我设置了背景，溢出到自动，我也设置了 z-index。

我认为所有这些组合导致能够在顶部栏/顶部菜单下滚动时隐藏文本内容。

.topnavigation {  
    background-position:fixed;
    background-color:   lightgray;
    width:              100%;
    overflow:           auto;
    z-index:            10;

}
    .main_body {
        background:     white;
        position:       relative;
        left:           200px;
        top:            30px;
        bottom:         0;
        right:          0;
        white-space:    wrap; 
        width:          660px; 
        overflow:       auto;
        border:         0px;
        z-index:        1;


    }

【讨论】：