如何在引導容器中顯示圖像作爲背景

我對網絡開發很新穎，但我正在嘗試製作網站。我遇到了一個問題，我無法將圖像加載爲容器的背景。你知道像那些運行一個工廠碳複製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; 
}

那我做錯了嗎？爲什麼？

來源

2017-10-29 TheSnowmann

您正在一個屬性中指定兩個背景屬性。所以，應該使用背景的簡寫屬性：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; 
}

來源

2017-10-29 01:40:33

謝謝！這是解決方案。對此，我真的非常感激。 – TheSnowmann

沒問題。：） –

如何在引導容器中顯示圖像作爲背景

回答

相關問題