导航背景以匹配身体背景图像 Css

Question

我有一个水平导航栏，我想在滚动时使用position:fixed 来保持它，并且当我们向下滚动时，我有一个主窗口和不同颜色的不同 div。我想要的是让导航在滚动时匹配主 div 的图像，当主 div 结束时，再次开始在该图像上滚动，就像一个循环。

这甚至可能吗？这是我正在使用的 CSS：

#nav {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 7%;
    text-align: center;
    padding: .5em 0 1em 0;
    z-index: 1;
    overflow: hidden;
    background-image: inherit;
}

#nav > ul {
    line-height: 0px;
    position: relative;
    display: inline-block;
    margin: 0;
    height: 21px;
    border-left: solid 1px rgba(192,192,192,0.35);
    border-right: solid 1px rgba(192,192,192,0.35);
}

#header {
    position: relative;
    background-image: url('../images/header.jpg');
    background-size: cover;
    background-position: center center;
    background-attachment: fixed;
    color: #fff;
    text-align: center;
    padding: 2.5em 0 2em 0;
    cursor: default;
}

#banner {
    background: #fff;
    text-align: center;
    padding: 4.5em 0 4.5em 0;
}

标题和横幅是我使用的 2 个不同的 div 部分..

这是我使用的 HTML。

    <!-- Header -->
    <div id="header">

        <!-- Inner -->
        <div class="inner">
            <header>
                <h2>Por<br/>Veracruz</h2>
                <span class="byline"><br>Tu ayudante hallando hospedaje<br> por el estado de Veracruz!</span>
            </header>
            <footer>
                <a href="#banner" class="button circled scrolly">Buscar!</a>
            </footer>
        </div>

        <!-- Nav -->
        <nav id="nav">
            <ul>
                <li><a href="index.html">Inicio</a></li>
                <li><a href="#banner" class="scrolly">Encuentra</a></li>
                <li><a href="right-sidebar.html">Aventura al Azar</a></li>
                <li><a href="no-sidebar.html">Contacto</a></li>
            </ul>
        </nav>

    </div>

    <!-- Banner -->
    <div id="banner">
        <h2>Hola! Te ayudamos a buscar?</h2>
            <div class="row half no-collapse-1">
                <div class="9u">
                    <input type="text" name="lugar" placeholder="Ayudanos con el lugar..." align="right"/>
                </div>
                <div class="3u" align="left">
                    <h3><a href="#" class="button" align="left">Buscar!</a></h3>
                    <br><br>
                </div>
                <div id="middle" class="12u" style="background: #2b252c;">
                    <font color="white"><h2><u>Lugares más visitados</u></font></h2>
                </div>
            </div>


    <!-- Carousel -->
    <div class="carousel">
        <div class="reel">

            <article>
                <a href="http://mdomaradzki.deviantart.com/art/Bueller-III-351975087" class="image featured"><img src="images/pic01.jpg" alt="" /></a>
                <header>
                    <h3><a href="#">Pulvinar sagittis congue</a></h3>
                </header>
                <p>Commodo id natoque malesuada sollicitudin elit suscipit magna.</p>                           
            </article>

            <article>
                <a href="http://mdomaradzki.deviantart.com/art/Disco-351602759" class="image featured"><img src="images/pic02.jpg" alt="" /></a>
                <header>
                    <h3><a href="#">Fermentum sagittis proin</a></h3>
                </header>
                <p>Commodo id natoque malesuada sollicitudin elit suscipit magna.</p>                           
            </article>

            <article>
                <a href="http://mdomaradzki.deviantart.com/art/The-Patina-of-Time-and-Tide-352128094" class="image featured"><img src="images/pic03.jpg" alt="" /></a>
                <header>
                    <h3><a href="#">Sed quis rhoncus placerat</a></h3>
                </header>
                <p>Commodo id natoque malesuada sollicitudin elit suscipit magna.</p>                           
            </article>

            <article>
                <a href="http://mdomaradzki.deviantart.com/art/Cityparts-XVIII-350427779" class="image featured"><img src="images/pic04.jpg" alt="" /></a>
                <header>
                    <h3><a href="#">Ultrices urna sit lobortis</a></h3>
                </header>
                <p>Commodo id natoque malesuada sollicitudin elit suscipit magna.</p>                           
            </article>

            <article>
                <a href="http://mdomaradzki.deviantart.com/art/Vine-Country-381350120" class="image featured"><img src="images/pic05.jpg" alt="" /></a>
                <header>
                    <h3><a href="#">Varius magnis sollicitudin</a></h3>
                </header>
                <p>Commodo id natoque malesuada sollicitudin elit suscipit magna.</p>                           
            </article>

            <article>
                <a href="http://mdomaradzki.deviantart.com/art/Bueller-III-351975087" class="image featured"><img src="images/pic01.jpg" alt="" /></a>
                <header>
                    <h3><a href="#">Pulvinar sagittis congue</a></h3>
                </header>
                <p>Commodo id natoque malesuada sollicitudin elit suscipit magna.</p>                           
            </article>

            <article>
                <a href="http://mdomaradzki.deviantart.com/art/Disco-351602759" class="image featured"><img src="images/pic02.jpg" alt="" /></a>
                <header>
                    <h3><a href="#">Fermentum sagittis proin</a></h3>
                </header>
                <p>Commodo id natoque malesuada sollicitudin elit suscipit magna.</p>                           
            </article>

            <article>
                <a href="http://mdomaradzki.deviantart.com/art/The-Patina-of-Time-and-Tide-352128094" class="image featured"><img src="images/pic03.jpg" alt="" /></a>
                <header>
                    <h3><a href="#">Sed quis rhoncus placerat</a></h3>
                </header>
                <p>Commodo id natoque malesuada sollicitudin elit suscipit magna.</p>                       
            </article>

            <article>
                <a href="http://mdomaradzki.deviantart.com/art/Cityparts-XVIII-350427779" class="image featured"><img src="images/pic04.jpg" alt="" /></a>
                <header>
                    <h3><a href="#">Ultrices urna sit lobortis</a></h3>
                </header>
                <p>Commodo id natoque malesuada sollicitudin elit suscipit magna.</p>                           
            </article>

            <article>
                <a href="http://mdomaradzki.deviantart.com/art/Vine-Country-381350120" class="image featured"><img src="images/pic05.jpg" alt="" /></a>
                <header>
                    <h3><a href="#">Varius magnis sollicitudin</a></h3>
                </header>
                <p>Commodo id natoque malesuada sollicitudin elit suscipit magna.</p>                       
            </article>

        </div>
    </div>

谢谢！

Answer 1

查看此示例可能会对您有所帮助 here is link