Question

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

以下是演示网站：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;
  }

Answer 1

为什么不能设置与身体相同的背景颜色和图像？

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

在Chrome开发工具中只使用花花公子。

Answer 2

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

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

导航栏屏蔽

2 个答案: