文章/答案/技术大牛

发布

社区首页 >问答首页 >在导航栏下方显示背景图片

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

Stack Overflow用户

提问于 2020-01-13 22:36:59

回答 1查看 62关注 0票数 1

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

我试着使用这个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>

有没有人能帮我找出我在这里遗漏了什么？

css

image

navbar

html

回答 1

Stack Overflow用户

回答已采纳

发布于 2020-01-13 22:52:02

如果您为body设置background-image，它将被navbar覆盖，因为导航栏是body的一部分。只需为新div设置background-image

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>

票数 0

页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持

原文链接：

https://stackoverflow.com/questions/59718710

复制

相似问题

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

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

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

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

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