Question

我在这里读了另一个答案并修复了（所以我想），但它仍然不会出现。我知道图像是background.jpg，它位于img文件夹中。老实说，我很困惑，为什么这不起作用。它可能是引导程序弄乱吗？我假设没有，因为我的自定义CSS是在bootstrap CSS之后。

＆＃13;

.main-section {
  background-image: url(../img/background.jpg);
}

＆＃13;

<div class="container-fluid">
  <nav class="navbar navbar-default">
    <div class="container-fluid">
      <div class="navbar-header">
        <a class="navbar-brand" href="#">BFG</a>
      </div>
      <div class="navbar-header">
        <a class="navbar-brand" href="#"><i class="fa fa-heart" aria-hidden="true"></i></a>
      </div>
      <ul class=" nav navbar-nav">
        <li><a href="#">Hours</a></li>
        <li><a href="#">Gifts</a></li>
        <li><a href="#">Flowers</a></li>
        <li><a href="#">Balloons</a></li>
      </ul>
    </div>
  </nav>
</div>
<div class="container-fluid">
  <div class="jumbotron main-section">
    <div class="row">
      <div class="col-md-12 text-center">
        <h1>Balloons Flowers and Gifts</h1>
        <h3>The perfect way to brighten someone's day, and make them smile!</h3>
      </div>
    </div>
  </div>
  <div class="row">
    <div class="col-md-3 text-center">
      <a href="#"><h2>Balloons</h2></a>
    </div>
    <div class="col-md-3 text-center">
      <a href="#"><h2>Flowers</h2></a>
    </div>
    <div class="col-md-3 text-center">
      <a href="#"><h2>Gifts</h2></a>
    </div>
    <div class="col-md-3 text-center">
      <a href="#"><h2>Hours</h2></a>
    </div>
  </div>

＆＃13;

Answer 1

它是你的imgfile，我只是更改你的firefox图标的网址，它的工作原理。如果文件存在或权限，则为chech。路径。

＆＃13;

.main-section {
  background-image: url(http://newtab.firefoxchina.cn/img/worldindex/logo.png);
}

＆＃13;

<div class="container-fluid">
  <nav class="navbar navbar-default">
    <div class="container-fluid">
      <div class="navbar-header">
        <a class="navbar-brand" href="#">BFG</a>
      </div>
      <div class="navbar-header">
        <a class="navbar-brand" href="#"><i class="fa fa-heart" aria-hidden="true"></i></a>
      </div>
      <ul class=" nav navbar-nav">
        <li><a href="#">Hours</a></li>
        <li><a href="#">Gifts</a></li>
        <li><a href="#">Flowers</a></li>
        <li><a href="#">Balloons</a></li>
      </ul>
    </div>
  </nav>
</div>
<div class="container-fluid">
  <div class="jumbotron main-section">
    <div class="row">
      <div class="col-md-12 text-center">
        <h1>Balloons Flowers and Gifts</h1>
        <h3>The perfect way to brighten someone's day, and make them smile!</h3>
      </div>
    </div>
  </div>
  <div class="row">
    <div class="col-md-3 text-center">
      <a href="#"><h2>Balloons</h2></a>
    </div>
    <div class="col-md-3 text-center">
      <a href="#"><h2>Flowers</h2></a>
    </div>
    <div class="col-md-3 text-center">
      <a href="#"><h2>Gifts</h2></a>
    </div>
    <div class="col-md-3 text-center">
      <a href="#"><h2>Hours</h2></a>
    </div>
  </div>

＆＃13;

Answer 2

尝试添加背景尺寸：封面;就在你的背景之后。确保指定宽度和宽度。该部分的高度也应该没问题希望有所帮助：）

为什么我的背景图片没有显示？

2 个答案: