Question

我是烧瓶新手。我想使用home.html页面中Flask中的Bootstrap在巨无霸中显示背景图像。但是，我无法调整其大小。另外，我的文本“ Tomvar”和其他文本位于图像下方而不是图像上方。 home.html和jumboron.css的详细信息。在下面给出

我的 home.html

{% extends "layout.html" %}

{% block title %}Home{% endblock %}

{% block main %}

<main role="main">

  <!-- Main jumbotron for a primary marketing message or call to action -->
  <div class="container">
  <div class="jumbotron">

   <img src="{{url_for('static', filename='image/home_bg.png')}}" class="image1"/>

      <h1 class="display-3">TomVar</h1>
      <p>A database for variations in Tomato</p>
      <p><a class="btn btn-primary btn-lg" href="#" role="button">Learn more &raquo;</a></p>
    </div>
  </div>

  <div class="container">
    <!-- Example row of columns -->
    <div class="row">
      <div class="col-md-4">
        <h2>Heading</h2>
        <p>Donec id elit non mi porta gravida at eget metus. Fusce dapibus, tellus ac </p>
        <p><a class="btn btn-secondary" href="#" role="button">View details &raquo;</a></p>
      </div>
      <div class="col-md-4">
        <h2>Heading</h2>
        <p>Donec id elit non mi porta gravida at eget metus. Fusce dapibus, tellus ac cursus  </p>
        <p><a class="btn btn-secondary" href="#" role="button">View details &raquo;</a></p>
      </div>
      <div class="col-md-4">
        <h2>Heading</h2>
        <p>Donec sed odio dui. Cras justo odio, dapibus ac facilisis in, egestas eget quam. </p>
        <p><a class="btn btn-secondary" href="#" role="button">View details &raquo;</a></p>
      </div>
    </div>
    <hr>

  </div> <!-- /container -->

</main>
{% endblock %}

<footer class="container">
  <p>&copy; Company 2017-2018</p>
</footer>

我的 jumbotron.css （位于我的static / css文件夹中）：

body {

    padding-top: 3.5rem;
}
.image1 {

 opacity: 0.5;
 background-attachment: fixed;
 background-position: center;
 background-repeat: no-repeat;
 background-size: cover;
}

Answer 1

您不能在background-size: cover上使用<img>封面。它仅用于背景图像。

如果要插入实际的<img>，请使用object-fit: cover

.jumbotron {
  position: relative;
  overflow: hidden;
  width: 100%;
}

.jumbotron-image {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.jumbotron-content {
  color: white;
  position: relative;
}

<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" rel="stylesheet" />
<div class="container">
  <div class="jumbotron">

    <img src="https://picsum.photos/800/500" class="jumbotron-image" />

    <div class="jumbotron-content">
      <h1 class="display-3">TomVar</h1>
      <p>A database for variations in Tomato</p>
      <p><a class="btn btn-primary btn-lg" href="#" role="button">Learn more &raquo;</a></p>
    </div>

  </div>
</div>

编辑：相反，您可以在.jumbotron上为背景图像添加内联样式（使用长颈瓶）

.jumbotron {
  background-size: cover;
}

.jumbotron-content {
  color: white;
}

<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" rel="stylesheet" />
<div class="container">
  <div class="jumbotron" style="background-image:url(https://picsum.photos/800/500)">

    <div class="jumbotron-content">
      <h1 class="display-3">TomVar</h1>
      <p>A database for variations in Tomato</p>
      <p><a class="btn btn-primary btn-lg" href="#" role="button">Learn more &raquo;</a></p>
    </div>

  </div>
</div>

Flask Boostrap背景图片选项

1 个答案: