在引导程序 5 导航栏后面设置背景图像

Question

我正在尝试实现与此类似的东西

这就是我的 atm （启用 bg-dark 以便文本可见） 如您所见，有很大的不同大声笑，我只需要将图像转换为任务栏后面的go，然后我需要知道如何使任务栏透明

<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）

Answer 1

您需要一个包含nav和contents的包装器div 。 div 包装器具有背景图像 CSS 属性。

然后你可以添加background-color: transparent到nav添加一个新的 class。 为了这，

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

您当前的代码

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

Answer 2

<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>

在引导程序 5 导航栏后面设置背景图像

问题描述

2 个解决方案

解决方案1
1 2021-01-25 07:04:09

您当前的代码

解决方案2
1 2021-01-25 07:23:27

在引导程序 5 导航栏后面设置背景图像

问题描述

2 个解决方案

解决方案1 1 2021-01-25 07:04:09

您当前的代码

解决方案2 1 2021-01-25 07:23:27

解决方案1
1 2021-01-25 07:04:09

解决方案2
1 2021-01-25 07:23:27