фоновое изображение в jumbotron в начальной загрузке не работает - PullRequest
Новая
       30

фоновое изображение в jumbotron в начальной загрузке не работает

0 голосов
/ 07 января 2019

Перепробовал все, что я могу придумать, каждое решение, предложенное в другом месте онлайн. Это HTML-код с классом jumbotron div. Я работаю в Python над кодом Visual Studio. 

<!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');
  }

Jumbotron появляется на веб-странице, но изображение не отображается. Я пытался переместить изображение в разные папки и т. Д. И изменить URL-адрес, но безуспешно. Я новичок, и помощь будет оценена, спасибо.

1 Ответ

0 голосов
/ 07 января 2019

Попробуйте это: 

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

Меняется ли фон на черный? Если это так, это означает, что CSS применяется. Теперь попробуйте вернуться к своему фоновому изображению с флагом! Important в конце. Если это не работает, возможно, это проблема с вашим путем?

...