Question

我正在尝试更改我在其中一个视图上的jumbotron的背景图像，它只是不起作用。我已经查看了堆栈上的大量帖子，并尝试了所有建议的解决方案，但它们都没有为我工作。 HTML

    <html>
    <head>

        <meta charset="utf-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <meta name="viewport" content="width=device-width, initial-scale=1">

        <!-- Bootstrap -->
        <link href="dist3/css/bootstrap.min.css" rel="stylesheet">
        <link href="css/style.css" type="text/css" rel="stylesheet">


    </head>
    <body>
        <nav class="navbar navbar-default navbar-fixed-top">
          <div class="container">
            <ul>
                <li>About</li>
                <li>Me</li>
            </ul>
          </div>
        </nav>

    <div class="content">
    <div class="jumbotron">
      <div class="container">
          <h1>Allan Araujo</h1>      
          <p>Example paragraph</p>
      </div>
    </div>

    <section class="pink">
      <div class="container-fluid">
        <div class="row">
          <div class="col-xs-12"><h3>.container-fluid</h3></div>
        </div>
        <div class="row">
          <div class="col-xs-6">Column one</div>
          <div class="col-xs-6">Column one</div>      
        </div>
      </div>
    </section>

    <section class="green">
      <div class="container">
        <div class="row">
          <div class="col-xs-12"><h3>.container</h3></div>
        </div>    
        <div class="row">
          <div class="col-xs-6">Column one</div>
          <div class="col-xs-6">Column one</div>      
        </div>
      </div>  
    </section>
   </div> <!--END CONTENT-->
  </body>
   </html>

CSS：

/*  ============================================= JUMBOTRON =============================================   */
.jumbotron {
    background: url('/img/congruent_pentagon.png') no-repeat center center !important; 
    background-size: cover;
}

.nav {
    text-align: center; 
    padding: 0; 
    margin: 0;  
    background-color: red;
    height: 10%;
}
.nav li {
    display: inline-block;
    margin-right: 5%;
    margin-left: 5%;  
}



.pink {
  background-color: #f99;
}

.green {
  background-color: #9f9;
}

section {
  padding-bottom: 20px;   
}

我的文件夹结构如下：

FOLDER
--css
  --style.css
--dist
--img
  --congruent_pentagon.png
--header.php
--index.php

我试图更改网址以查看是否存在问题，但这也无法解决问题。奇怪的部分是背景现在是灰色的，但没有显示我想要的图像。

编辑：现在显示整个html / css文档。我使用PHP加载导航栏但我只是将它们组合在一起，以便更容易查看。

Answer 1

问题与您图片的网址有关，请将其更改为/img/congruent_pentagon.png 在线示例：http://jsfiddle.net/tthLjchm/1/

的CSS：

.jumbotron {
    background: url('http://getbootstrap.com/assets/img/sass-less.png') no-repeat center center !important; 
    height: 50%;
    margin-top: 10px; 
    color: black; 
}

.jumbotron p, h1 {
    text-align: center;
}

Answer 2

问题是图片必须放在我的css文件夹中。

改变jumbotron bootstrap的背景3

2 个答案: