Question

我正在尝试在导航栏下方添加完整尺寸的背景图片。现在，它部分覆盖了我的背景图像。

我尝试使用此Adding a background image just below the navigation bar，但对我来说并没有任何改变。

现在我的代码是这样的（CSS）：

body {
    margin: 0;
    background: #353535;
    font-family: 'Work Sans', sans-serif;
    font-weight: 800;

    background-image: url(imageabc.png);
    background-size: cover;
    background-repeat: no-repeat;
    background-attachment: fixed;
}

我的导航栏也在我的HTML代码中：

<body>

    <header>
        <div class="container">
            <img src="imagebcd.png" alt="logo" class="logo"> <!-- logo image src -->

            <nav>
                <ul>
                    <li><a href="#">Home</a></li>
                    <li><a href="#">About Us</a></li>
                    <li><a href="#">Contact Us</a></li>
                </ul>
            </nav>
        </div>
    </header>

</body>

有人可以帮助我确定我在这里缺少什么吗？

Answer 1

如果您将std::map设置为background-image，则由于导航栏是body的一部分，因此navbar将覆盖body。只需将您的background-image设置为新的div：

PS：您可以根据需要使用background-position，background-size等设置。这是一个不错的link。

body {
    margin: 0;
    background: #353535;
    font-family: 'Work Sans', sans-serif;
    font-weight: 800;

}

.full-size-img {
    background-image: url("https://via.placeholder.com/1150");
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    height: 100vh;
}

        <header>
            <div class="container">
                <img src="imagebcd.png" alt="logo" class="logo"> <!-- logo image src -->
    
                <nav>
                    <ul>
                        <li><a href="#">Home</a></li>
                        <li><a href="#">About Us</a></li>
                        <li><a href="#">Contact Us</a></li>
                    </ul>
                </nav>
            </div>
        </header>
        <div class="full-size-img">

        </div>

在导航栏下方显示背景图片

1 个答案: