Question

尝试了我能想到的所有内容，并在网上其他地方提出了每种解决方案。这是使用jumbotron div类的html代码。我正在使用Visual Studio Code开发Python。

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

      <title>Bootstrap Cheatsheet</title>

      <!-- Bootstrap -->
      <link href="{{ url_for('static', filename='css/bootstrap.min.css') }}" rel="stylesheet">
      <link href="{{ url_for('static', filename='css/custom-style.css') }}" rel="stylesheet">

    </head>
      <div class="bg-primary">
        <body>

            <div class="jumbotron">


            <div class="container">

              <h1 class="page-header">
                  <span class="glyphicon glyphicon-eye-open" aria-hidden="true"></span>

                WOW! <small>.com</small></h1>

              <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt 
                ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco 
                laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate 
                velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, 
                sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
            </div>
          </div>   

          <!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
          <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
          <!-- Include all compiled plugins (below), or include individual files as needed -->
          <script src="{{ url_for('static', filename='js/bootstrap.min.js') }}"></script>

          <div class="alert alert-danger" role="alert">
              <span class="glyphicon glyphicon-exclamation-sign" aria-hidden="true"></span>
              <span class="sr-only">Error:</span>
              Enter a valid email address
            </div>


        </body>
      </div>  
  </html>

这是带有“银河”图像的相应CSS文件：

.jumbotron{
    background-image: url('../milky-way.jpg');
}

html {
    background-image: url('milky-way.jpg');
  }

巨无霸出现在网页中，但没有图像显示。我试过将图像移到其他文件夹等并更改URL，但没有成功。我是新手，不胜感激，谢谢。

Answer 1

尝试一下：

.jumbotron {
    background-color: #000000 !important;
}

背景是否变为黑色？如果是这样，则表示正在应用css。现在尝试返回到背景图片，最后带有！important标志。如果不起作用，可能是您的路径有问题？

引导程序中的巨型机中的背景图像不起作用

1 个答案: