html - Flask Bootstrap 背景图像选项

Question

我是 Flask 的新手。我想在 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 上为背景图像添加内联样式(使用 flask)

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