在bootstrap5导航栏后面设置背景图像

I am trying to achieve something similar to this Goal

This is what I have atm (bg-dark enabled just so text is visible) Current state As you can see theres quite a difference lol, I just need the image to go behind the taskbar, and then I need to know how to make the taskbar transparent

<body>
        <nav class="navbar navbar-expand mt-3">
            <div class="container-fluid bg-dark">
                <div class="w-100">
                    <img src="img/logo.png" class="ms-4" width="60" alt="Logo">
                    <button class="navbar-brand ms-5 fw-bold">TEST</button>
                </div>
                <div class="navbar-nav justify-content-center">
                    <a class="nav-link text-light">One</a>
                    <a class="nav-link text-light">Two</a>
                    <a class="nav-link text-light">Three</a>
                    <a class="nav-link text-light">Four</a>
                </div>
                <div class="w-100"></div>
            </div>
        </nav>
        <img class="bg-img" src="backgrounds/index_background_top.png">
</body>

(引导 5)

1

您需要一个包含navcontents的包装器div。div 包装器具有 background-image CSS 属性。

然后,您可以将background-color: transparent添加到nav并添加一个新类。为此,

如果要保留 Bootstrap 5,则可能需要!important来覆盖 bootstrap css 属性。

您当前的代码

navimg是块元素,这就是图像位于nav区域下方的原因。

1
<body>
<style>
.container{
background-image: url("backgrounds/index_background_top.png")
}
.navbar{
background:transparent !important;
}
</style>
<div class="container">
        <nav class="navbar navbar-expand mt-3">
            <div class="container-fluid bg-dark">
                <div class="w-100">
                    <img src="img/logo.png" class="ms-4" width="60" alt="Logo">
                    <button class="navbar-brand ms-5 fw-bold">TEST</button>
                </div>
                <div class="navbar-nav justify-content-center">
                    <a class="nav-link text-light">One</a>
                    <a class="nav-link text-light">Two</a>
                    <a class="nav-link text-light">Three</a>
                    <a class="nav-link text-light">Four</a>
                </div>
                <div class="w-100"></div>
            </div>
        </nav>
</div>
</body>

本站系公益性非盈利分享网址,本文来自用户投稿,不代表码文网立场,如若转载,请注明出处

(874)
服务器以“image/png”的MIME类型响应-HTML/JavaScript
上一篇
AzureADDS和漫游配置文件
下一篇

相关推荐

发表评论

登录 后才能评论

评论列表(71条)