I am trying to achieve something similar to this
This is what I have atm (bg-dark enabled just so text is visible)
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">
<on class="navbar-brand ms-5 fw-bold">TEST</on>
</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）
您需要一个包含nav和contents的包装器div。div 包装器具有 background-image CSS 属性。
然后，您可以将background-color: transparent添加到nav并添加一个新类。为此，
如果要保留 Bootstrap 5，则可能需要!important来覆盖 bootstrap css 属性。
您当前的代码
nav和img是块元素，这就是图像位于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">
<on class="navbar-brand ms-5 fw-bold">TEST</on>
</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>
本站系公益性非盈利分享网址，本文来自用户投稿，不代表码文网立场，如若转载，请注明出处
评论列表（48条）