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周围的div添加navbar样式，将背景图像应用于自举导航栏。

以下是您可以应用于图片的属性：

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] */
}

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

1 个答案: