BootStrap：jumbotron背景图片无法正常工作？

Question

I am having a problem adding background image to jumbotron class using bootstrap-css framework , I have linked my page to bootstrap cdn. 我在使用bootstrap-css框架将背景图像添加到jumbotron类时遇到问题，我已将页面链接到bootstrap cdn。 In my style tag of the page I have added 在页面的样式标签中，我添加了

.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;
}

This code to style the jumbotron class personaly and by url you can guess which image I want to add to jumbotron background and where it is stored.(Gusto is the folder I created on desktop)but the image is not showing up I tried an online url for a different image too but that too doesn't seem to work. 该代码可个性化设置jumbotron类的样式，并通过url可以猜测要添加到jumbotron背景中的图像以及该图像的存储位置。（Gusto是我在桌面上创建的文件夹），但是该图像没有显示，我尝试了在线网址也适用于其他图片，但这似乎也不起作用。

Answer 1

Have you tried changing the class name although I don't think it's because of the class name. 您是否尝试过更改类名，尽管我认为不是因为类名。 It's happening because of your image url. 这是由于您的图片网址引起的。 As Gusto is your project folder, changing the url to "Gusto_Background_Food.jpg" would work. 由于Gusto是您的项目文件夹，因此可以将URL更改为“ Gusto_Background_Food.jpg”。

index.html 的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 style.css文件

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

Folder Structure: 资料夹结构：

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

I guess this would help you. 我想这对您有帮助。 Please feel free to comment if this doesn't work for you. 如果这不适合您，请随时发表评论。

Answer 2

It is working..Please see the JS Fiddle here: 工作正常。请在此处查看JS小提琴：

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

HTML: HTML：

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

CSS; 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;
}

BootStrap：jumbotron背景图片无法正常工作？

问题描述

2 个解决方案

解决方案1
2 已采纳 2016-04-24 19:14:22

解决方案2
0 2016-04-24 19:20:39

BootStrap：jumbotron背景图片无法正常工作？

问题描述

2 个解决方案

解决方案1 2 已采纳 2016-04-24 19:14:22

解决方案2 0 2016-04-24 19:20:39

解决方案1
2 已采纳 2016-04-24 19:14:22

解决方案2
0 2016-04-24 19:20:39