html - 如何在 Bootstrap 容器中将图像显示为背景

Question

我是网络开发的新手，但我现在正在尝试制作一个网站。我遇到了一个问题，我无法将图像加载为容器的背景。您知道像那些普通的抄送 Bootstrap 网站一样。我在这里阅读了一些帖子，但它们并没有帮助解决我的问题。

文件结构:

/css/
   master.css
   bootstrap.min.css
   font-awesome.min.css
/imgs/
   pho.jpg
/scripts/
   bootstrap.min.js
index.html

HTML:

  <div class="container-fluid" id="landing">
    <div class="row">
      <div class="col-md-12">
        <ul class="nav nav-fill" id="topNav">
          <li class="nav-item">
            <a href="#" class="nav-link" id="orderOnline"><i class="fa fa-globe" aria-hidden="true"></i> Order Online</a>
          </li>
          <li class="nav-item">
            <a href="#" class="nav-link" id="contactPhone"><i class="fa fa-phone" aria-hidden="true"></i> 1-843-123-4567</a>
          </li>
          <li class="nav-item">
            <a href="#" class="nav-link" id="hours"><i class="fa fa-clock-o" aria-hidden="true"></i> 10:00 - 23:59</a>
          </li>
          <li class="nav-item">
            <a href="#" class="nav-link" id="myAccount"><i class="fa fa-user-circle" aria-hidden="true"></i> My Account</a>
          </li>
          <li>
            <a href="#" class="nav-link" id="cart"><i class="fa fa-shopping-cart" aria-hidden="true"></i> Cart</a>
          </li>
        </ul><!-- end of topNav -->
        <nav class="navbar navbar-expand-lg navbar-transparent">
          <a class="navbar-brand" href="#">Low-Country Thai Cuisine</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">
            <ul class="navbar-nav mr-auto">
              <li class="nav-item active">
                <a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a>
              </li>
              <li class="nav-item">
                <a class="nav-link" href="#">About</a>
              </li>
              <li class="nav-item">
                <a class="nav-link" href="#">Menu</a>
              </li>
              <li class="nav-item">
                <a class="nav-link" href="#">Contact</a>
              </li>
            </ul>
          </div>
        </nav> <!-- end of navbar -->
      </div><!-- end of landing -->
    </div><!-- end of row -->

CSS:

#landing {
  background-image: url('../imgs/pho.jpg') no-repeat;
  -webkit-background-size: 100% auto;
  -moz-background-size: 100% auto;
  -o-background-size: 100% auto;
  background-size: 100% auto;
}

那我做错了什么？为什么？

Answer 1

您在一个属性中指定了两个背景属性。因此，应该使用背景的简写属性:background。 应该这样写:

#landing {
  background: url('../imgs/pho.jpg') no-repeat;
  -webkit-background-size: 100% auto;
  -moz-background-size: 100% auto;
  -o-background-size: 100% auto;
  background-size: 100% auto;
}