如何獲得Bootstrap jumbotron上的背景圖像

我想要使用圖像作爲我的jumbotron的背景，無法獲取圖像顯示。我可以更改jumbotron的其他屬性，但無法弄清楚我在做什麼背景圖像錯誤。如何獲得Bootstrap jumbotron上的背景圖像

這裏是我的html

<header> 
     <div class="jumbotron"> 
      <div class="container"> 
      <h1 class="display-3"> Large Text </h1> 
      <h1 class="display-4"> Smaller Text </h1> 
      <p><a href="#" class="btn btn-success btn-lg">Learn More »</a></p> 
     </div> 
     </div> 
     </header>

...這是我的CSS

.jumbotron { 
     background: url("img/banner.jpg"); 
     color: black; 
     }

爲什麼我不能得到這個工作？我的文件路徑絕對正確。

在此先感謝您的幫助！

來源

2016-09-29 Nate

我原本回答這個說Bootstrap可能覆蓋你的'背景'聲明。然而，看起來Bootstrap不使用'background'，而是使用'background-color'，所以我的回答是不正確的。我建議你仔細檢查一下，以確保你的文件路徑絕對正確，因爲我相信你應該有效。 –

剛剛運行一個快速測試（http://imgur.com/a/RFa73）應該沒有問題的方式，你做了他們。爲什麼你的jumbotron在你的頭部？ – Craicerjack

您是否檢查過您的開發人員工具？ css規則是否適用於您的「jumbotron」div？（右鍵單擊 - >檢查元素可能會有所幫助......） – tgogos

-1

應該看到工作http://jsfiddle.net/C4Sjg/538/

.jumbotron{ 
    background-image: url(https://www.google.co.in/logos/doodles/2016/ladislao-jose-biros-117th-birthday-5067428201496576-res.png); 
    color:white; 
}

如果這不起作用，那麼你應該檢查元素你的代碼，看看有什麼問題，如果你能提供實時鏈接到的問題，那麼這將很容易爲我們找到問題

來源

2016-09-29 15:24:33 Rahul

這是如何回答所問的問題？ – Craicerjack

是的你是對的我的不好，Nate應該調試代碼，看看是什麼導致問題 – Rahul

-1

感謝您的回答大家！我結束了採取不同的路線，只是放在我想要的身體背景圖像，而不是jumbotron。然後，我只是將jumbotron背景變成透明的，以便背景圖像通過。

來源

2017-01-11 18:30:05 Nate

你能提供這個解決方案的代碼嗎？這將有助於未來有相同問題的其他人。 – soundslikeodd

如何獲得Bootstrap jumbotron上的背景圖像

回答

相關問題