导航栏遮罩答案

【问题标题】：Navigation bar masking导航栏遮罩
【发布时间】：2013-12-06 14:17:54
【问题描述】：

我想在这里实现的是透明导航栏隐藏下面的任何内容并仅保留背景。因此，如果您向下滚动页面，固定导航栏下的任何内容都将被隐藏。我用谷歌搜索了它，但没有找到任何令人满意的结果。有没有可能？

这里是演示站点：http://klaunfizia.pl/damian/ 风格：http://klaunfizia.pl/damian/style.css

我现在得到的：http://i.imgur.com/6k2yNJbh.jpg 我想要达到的目标：http://i.imgur.com/VICvrUDh.jpg

背景图片不纯色，因此将导航栏颜色设置为#ff7400 将不是解决方案。

代码：

        <ul id="menu">
            <li>
                <a href="#">
                    &nbsp; Home &nbsp;
                </a>
            </li>
            <li>
                <a href="#">
                    &nbsp; About me &nbsp;
                </a>
            </li>
            <li>
                <a href="#">
                    &nbsp; Portfolio &nbsp;
                </a>
            </li>
            <li>
                <a href="#">
                    &nbsp; Contact &nbsp;
                </a>
            </li>

        </ul>
    </nav>

<section id="container">
    <section id="main">
        <h1>hi! My name is Damian</h1>
        <p class="mainText">
            I'm a graphic designer from Poland specializing in web design, 3D modeling, vector graphics and digital drawing. See my portfolio for more information.
        </p>
    </section>
</section>

css:

#navbar
 {
    height: 80px;
    width: 100%;
    position: fixed;
    -webkit-transform: translateZ(0);
    z-index: 10;
    top:0;
  }

【问题讨论】：

请输入代码。链接不够。前面的驼鹿应该告诉你的。
这还不够 HTML。向我们展示您的所有标题 html（导航容器及其上方的所有内容。）

标签： html css background masking clipping

【解决方案1】：

为什么不能设置和body一样的背景颜色和图片呢？

#navbar {
    background: url(images/background.jpg) #ff7400;
}

在 Chrome 开发工具中工作得很好。

【讨论】：

【解决方案2】：

假设您的标题/菜单容器具有纯色背景，这看起来像是一个简单的 z-index 问题。为您的菜单提供更高的 z-index。

如果您可以提供更多代码或 jsfiddle，我可以准确地告诉您要添加/删除/修复哪一行 css。很遗憾，您的网站没有加载。

【讨论】：