Question

我正在尝试将背景图片添加到导航栏下我主页上的第一个<div>。我正在使用Bootstrap 4和自定义style.css文件。

我的HTML是：

  <body>



    <div id="wrapper">
    <nav class="navbar navbar-expand-md navbar-light">
      <button class="navbar-toggler navbar-toggler-right" 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>
        <a href="#" id="text">
          text
        </a>

      <div class="collapse navbar-collapse" id="navbarSupportedContent navbar-selections">

        <div id="select-container">

            <ul class="navbar-nav mr-auto">
                <li class="nav-item ">
                    <a class="nav-link" href="#">link</a>
                  </li>
                  <li class="nav-item ">
                    <a class="nav-link" href="#">link</a>
                  </li>
                  <li class="nav-item">
                    <a class="nav-link" href="#">link</a>
                  </li>
                  <li class="nav-item">
                    <a class="nav-link" href="#">link</a>
                  </li>
                   <li class="nav-item ">
                    <a class="nav-link" href="#">link</a>
                  </li>
                  <li class="nav-item">
                    <a class="nav-link" href="#">link</a>
                  </li>
                  <li class="nav-item">
                    <a class="nav-link" href="#">link</a>
                  </li>
            </ul>

        </div>

        <div id="phone-number">
        <ul>        
        <li class="nav-item">
            <a class="nav-link" href="#">555.867.5309</a>
          </li>
        </ul>
        </div>

      </div>

     </nav>

    </div> 

    <div class="index-intro">




    </div>

我的css如下：

.index-intro {

        background: url(img.JPG);
        background-repeat: no-repeat;
        background-size: 100% 100%;

    }

然而，我的背景图片没有出现，只是一个白色的屏幕，顶部是导航栏。我很困惑，尝试了几种不同的方法。

例如，如果我将图像放在div中，如下所示：

<div class="index-intro">

    <img src="img.jpg">


        </div>

它会占据整个页面并重叠在导航栏上。

当我在div中包含导航栏时，它只会使背景图像出现在导航栏中，并使页面的其余部分留空。

有关如何在页面其余部分的导航栏下方制作背景图片的任何想法？

Answer 1

如果要显示整个图像，您需要确保.index-intro的宽度和高度等于图像的大小（如果您只想显示一部分，则需要确保任意大小它）。屏幕是白色的，因为你没有在div中放任何东西，所以它的大小为零。试试这个：

.index-intro {
    background: url(img.JPG);
    background-repeat: no-repeat;
    background-size: 100% 100%;
    width: 500px;
    height: 300px;
}

在css中声明背景图像但没有出现背景图像

1 个答案: