What I want to achieve here, is to transparent navigation bar hide anything underneath and leave background only. So if you scroll down the page anything that goes under fixed navbar will be hidden. I've googled it but didn't found any satisfying results. Is it even possible?

Here's the demo site: http://klaunfizia.pl/damian/ Style: http://klaunfizia.pl/damian/style.css

what I got now: http://i.imgur.com/6k2yNJbh.jpg What I want to achieve: http://i.imgur.com/VICvrUDh.jpg

Background image isn't solid, so setting navigation bar color to #ff7400 won't be a solution.

code:

        <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;
  }
有帮助吗?

解决方案

Why can't you set the same background color and image as the body?

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

Works just dandy in Chrome dev tools.

其他提示

Assuming that your header/menu container has a solid background color, this looks like a simple z-index issue. Give your menu a higher z-index.

If you could provide more code or a jsfiddle, I could tell you exactly which line of css to add/remove/fix. Unfortunately your site isn't loading.

许可以下: CC-BY-SA归因
不隶属于 StackOverflow
scroll top