css - 如何在 Bootstrap 4 中使用图像作为导航背景

Question

如何使用具有图案背景的 Bootstrap 4

只是将网站转换为使用 Boostrap，目前我有这个标题使用深色背景，它看起来不错，但理想情况下，我想使用我以前用作导航栏的图案背景，而不是深灰色背景，这会遍及页面的整个宽度，而不是深灰色。

<div class="container-fluid fixed-top bg-dark">
    <div class="navbar  navbar-expand-lg navbar-dark bg-dark container text-center">

        <a href="http://jthink.net/index.jsp" class="navbar-brand">
            <img src="http://www.jthink.net/images/icon32.png"  width="30" height="30" class="d-inline-block align-top" alt="">
            JThink
        </a>
        <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
            <span class="navbar-toggler-icon"></span>
        </button>
        <div class="collapse navbar-collapse" id="navbarSupportedContent">
            <div class="navbar-nav">
                <a class="nav-item nav-link" href="http://blog.jthink.net">
                    Blog
                </a>
                <a class="nav-item nav-link" href="http://jthink.net/jaikozforum">
                    User Forum
                </a>
                <a class="nav-item nav-link" href="http://jthink.net/songkong">
                    SongKong
                </a>
                <a class="nav-item nav-link" href="http://jthink.net/jaikoz">
                    Jaikoz
                </a>
                <a class="nav-item nav-link" href="http://albunack.net" target="_blank">
                    Albunack
                </a>
                <a class="nav-item nav-link" href="http://www.jthink.net/jaudiotagger/index.jsp" >
                   Jaudiotagger
                </a>
            </div>
        </div>
    </div>
</div>

例如，而不是像这样

我希望此屏幕截图中的蓝色背景用于导航栏

Answer 1

您可以通过将 background-image 样式添加到 navbar 周围的 div 来将背景图像应用到 Bootstrap 导航栏。

以下是您可以应用于图像的属性:

background-image: url("[file-location].png");
background-repeat: ;/* Determine what direction the image will repeat */
background-position: ; /* Where the image will be positioned relative to "top, right, bottom, and/or left */
background-attachment: ; /* use with "fixed" to make it scroll with page */

在 W3Schools 阅读有关此属性的更多信息.

如果背景图像使您的超链接难以阅读，请使用 color: [hex value/color name]; 在 nav-item 或 nav-link 像这样:

.nav-item > a {
  color: #000000; /* [hex value / color name] */
}

然后您可以使用以下方法将鼠标悬停在链接上时更改链接的颜色:

.nav-item > a:hover {
  color: red; /* [hex value / color name] */
}