Question

我试图将图像放在我的导航栏中。问题是当我执行背景操作时：url（...）无重复中心也要居中：覆盖显示在固定导航栏下的图像并切断我的脸，所以想知道如何在导航栏下开始图像。

<header>
    <nav>
        <div class="logo">
            <img src="img/HC logo.svg">
        </div>
        <ul>
            <li><a href="#" class="link">Home</a></li>
            <li><a href="#" class="link">About</a></li>
            <li><a href="#" class="link">Portfolio</a></li>
            <li><a href="#" class="link">Contact</a></li>
        </ul>
        <div class="menu-toggle">
            <i class="fas fa-bars" aria-hidden="true"></i>
        </div>
    </nav>
    <div class="hero">
        <div></div>
        <div class="content">
            <h1>Hi, I'm .... & I'm a Front-end Developer</h1>
            <p>
                just testing my code
            </p>
            <a class="button" herf="#">Learn More</a>
        </div>
    </div>
</header>

谢谢。如果您还有其他需要，请告诉我。

Answer 1

听起来好像您希望导航栏相对放置，直到开始滚动然后才将其固定在某个位置。这样，您的英雄div将尊重导航栏的高度。为此，人们通常使用“粘性标头”

https://www.w3schools.com/howto/howto_js_sticky_header.asp

Answer 2

将背景位置从中心位置更改为top 20px或需要多少间距。 Check Here

如何在固定的导航栏下显示图像？

2 个答案: