爲什麼我的背景圖片不顯示？

我在這裏讀到另一個答案並修復它（所以我想），但它仍然不會出現。我知道圖像是background.jpg，它在img文件夾中。我真的很困惑，爲什麼這不起作用。它可能是引導它搞砸了嗎？我假設沒有，因爲我的自定義CSS是在引導CSS後。爲什麼我的背景圖片不顯示？

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

<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>

來源

2016-11-21 Austin Melms

你可以檢查控制檯，看看背景圖像是否沒有拋出任何錯誤，如文件未找到？ –

@praveenKumar沒有錯誤。 –

這是你的imgfile，我只是改變你的火狐圖標的網址，它的工作原理。 chech如果文件存在或權限允許，路徑。

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

<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>

來源

2016-11-21 01:26:51

我把相同的CSS放在身體選擇器下，圖像出現了。它必須與主要部分有關。我不知道它可能是什麼。 –

@AustinMelms你有沒有其他的風格，如果是的話，你可能會被抄襲。 –

我在CSS中有其他樣式的工作，就是這樣。 –

嘗試增加背景尺寸：蓋;在你的背景之後。請確保你指定的寬度爲&高度也爲該部分，你應該很好希望幫助:)

來源

2016-11-21 01:27:09 Allan

我試過了，我把相同的CSS放在身體選擇器下，圖像出現了。它必須與主要部分有關。我不知道它可能是什麼。 –

爲什麼我的背景圖片不顯示？

回答

相關問題