Welcome to OGeek Q&A Community for programmer and developer-Open, Learning and Share
Welcome To Ask or Share your Answers For Others

Categories

0 votes
361 views
in Technique[技术] by (71.8m points)

html - Setting a background image behind a bootstrap 5 navbar

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>

(Bootstrap 5)

question from:https://stackoverflow.com/questions/65880198/setting-a-background-image-behind-a-bootstrap-5-navbar

与恶龙缠斗过久,自身亦成为恶龙;凝视深渊过久,深渊将回以凝视…
Welcome To Ask or Share your Answers For Others

1 Reply

0 votes
by (71.8m points)
<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>

与恶龙缠斗过久,自身亦成为恶龙;凝视深渊过久,深渊将回以凝视…
OGeek|极客中国-欢迎来到极客的世界,一个免费开放的程序员编程交流平台!开放,进步,分享!让技术改变生活,让极客改变未来! Welcome to OGeek Q&A Community for programmer and developer-Open, Learning and Share
Click Here to Ask a Question

...