BootStrap：jumbotron背景圖片不工作？

我在使用bootstrap-css框架將背景圖像添加到jumbotron類時遇到了問題，我已將我的頁面鏈接到bootstrap cdn。在該頁面的我的風格標籤我已經加入BootStrap：jumbotron背景圖片不工作？

.jumbotron { 
    height: 500px; 
    display: flex; 
    align-items: center; 
    background: url("C:\Users\burningknight7\Desktop\Gusto\Gusto_Background_Food.jpg") center center; 
    background-size: cover; 
    margin: 100px 0px; 
}

此代碼本人來說樣式的超大屏幕類，並通過URL你能猜到我想要的圖像添加到超大屏幕的背景，並在那裏保存。（趣味是我在桌面上創建的文件夾）但圖像沒有顯示我嘗試了一個不同的圖像的在線網址，但這似乎並沒有工作。

來源

2016-04-24 tanay joshi burningknight7

你可以發佈jsfiddle或codepen嗎？ – Froy

你確定你想要一個到你的本地計算機的路徑嗎？ –

我已經在jsfiddle上測試過你的代碼。它工作正常。看看：https://jsfiddle.net/dzul1983/tmukas42/ –

您是否嘗試過更改類名稱，儘管我不認爲這是因爲類名造成的。這是因爲你的圖片網址。由於Gusto是您的項目文件夾，將URL更改爲「Gusto_Background_Food.jpg」將可行。

的index.html

<!DOCTYPE html> 
<html> 
    <head> 
    <meta charset="utf-8"> 
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css"> 
    <link rel="stylesheet" href="style.css"> 
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js" integrity="sha384-0mSbJDEHialfmuBBQP6A4Qrprq5OVfW37PRR3j5ELqxss1yVqOtnepnHVP9aJ7xS" crossorigin="anonymous"></script> 
    <title>Gusto Food</title> 
    </head> 
<body> 
    <div class="jumbotron background"> 
    <h1>Gusto Food!</h1> 
    <p>There must be something good that we are looking for.</p> 
    <p><a class="btn btn-primary btn-lg" href="#" role="button">Learn more</a></p> 
    </div> 
</body> 
</html>

的style.css

.background{ 
    height:500px; 
    display:flex; 
    align-items:center; 
    background:url("Gusto_Background_Food.jpg") center center; 
    background-size:cover; 
    margin:100px 0px; 
}

文件夾結構：

Gusto    
    - index.html 
    - style.css 
    - Gusto_Background_Food.jpg

我想這會幫助你。如果這不適合你，請隨時發表評論。

來源

2016-04-24 19:14:22

哇謝謝你，它的工作。我不知道爲什麼我以前沒有嘗試過。無論如何，再次感謝。 –

因爲它的工作原理，你能否將我的答案標記爲已接受？ –

這是working..Please看到JS小提琴這裏：

https://jsfiddle.net/DTcHh/19792/

HTML：

<div class="jumbotron"></div>

CSS;

.jumbotron { 
    height: 500px; 
    display: flex; 
    align-items: center; 
    background: url("http://www.wallpaperstunnel.com/wp-content/uploads/2016/02/Green-Background-Screensaver-HD-Wallpapers.jpg") center center; 
    background-size: cover; 
    margin: 100px 0px; 
}

來源

2016-04-24 19:20:39 satya

BootStrap：jumbotron背景圖片不工作？

回答

相關問題