Question

我在使用bootstrap-css框架将背景图像添加到jumbotron类时遇到问题，我已将我的页面链接到bootstrap cdn。在我添加的页面的样式标签中

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

这个代码用于设计jumbotron类的个性和url，你可以猜出我要添加到jumbotron背景的哪个图像以及它存储的位置。（Gusto是我在桌面上创建的文件夹）但图像没有显示我尝试了一个不同图像的在线网址，但这似乎也不起作用。

Answer 1

您是否尝试过更改类名，但我认为这不是因为类名。它正在发生，因为你的图像网址。由于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

我想这会对你有所帮助。如果这不适合您，请随时发表评论。

Answer 2

它正在工作......请在这里看到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;
}

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

2 个答案: