不同 Jinja2 模板的不同背景图片答案

【问题标题】：Different background images for different Jinja2 templates不同 Jinja2 模板的不同背景图片
【发布时间】：2019-02-02 00:46:33
【问题描述】：

我在 Jinja2 中有多个模板可以扩展我的布局。他们需要不同的背景。我已按照此处文档中的说明进行操作 http://flask.pocoo.org/docs/0.12/patterns/templateinheritance/#child-template, 但似乎无法让他们工作。想想出了什么问题？

这是 layout.html 的相关部分：

<html>
    <head>
        {% block head %}
        <title>Verbatim: Book Reviews & Recommendations</title>
        {% with messages = get_flashed_messages() %}
          {% if messages %}
            <ul class=flashes>
            {% for message in messages %}
              <li>{{ message }}</li>
            {% endfor %}
            </ul>
          {% endif %}
        {% endwith %}
        <!-- Bootstrap 4 -->
        <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" integrity="sha384-WskhaSGFgHYWDcbwN70/dfYBj47jz9qbsMId/iRN3ewGhXQFZCSftd1LZCfmhktB" crossorigin="anonymous">
        <!-- Fontawesome -->
        <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.2.0/css/all.css" integrity="sha384-hWVjflwFxL6sNzntih27bfxkr27PmbbK/iSvJ+a4+0owXq79v+lsFkW54bOGbiDQ" crossorigin="anonymous">
        <!-- Google Fonts -->
        <link href="https://fonts.googleapis.com/css?family=IM+Fell+English+SC" rel="stylesheet">
        <!-- Additional CSS -->
        <link rel="stylesheet" href="{{ url_for('static', filename='styles.css') }}">
        {% endblock %}
    </head>

这是我尝试在其中插入不同背景图片的模板：

{% extends "layout.html" %}

{% block head %}
{{ super() }}
<style>
    body {
        background-image: url(yellowed-paper-texture.jpg);
    }
</style>
{% endblock %}

{% block body %}
<div class="container h-100 my-5 form">
    <div class="row h-100 justify-content-center align-items-center">
        <div class="col-md-12 col-sm-12 col-xs-12 form">
           etc ....

编辑：我的 CSS 文件似乎不包含任何会缩短继承过程的令人兴奋的内容。

@media (max-width: 768px) {
  div.ratings {
    font-size: 13px; } 
}

@media (max-width: 768px) {
  #siteName {
    font-size: 26px; }

  #siteSubTitle {
    font-size: 20px; }

  #siteTagLine {
    font-size: 14px; } }

@media (min-width: 768px) and (max-width: 992px) {
  #siteName {
    font-size: 26px; }

  #siteSubTitle {
    font-size: 20px; }

  #siteTagLine {
    font-size: 14px; } }

@media (min-width: 992px) {
  #siteName {
    font-size: 36px; }

  #siteSubTitle {
    font-size: 30px; }

  #siteTagLine {
    font-size: 24px; } }
#siteName, #siteSubTitle, #siteTagLine {
  font-family: "IM Fell English SC", serif; }

.blank_row {
  height: 10px !important;
  /* overwrites any other rules */
  background-color: #FFFFFF; }

a.nav-link {
  color: #E8E8EE !important; }

a.nav-link:hover {
  text-shadow: 0 0 5px #FFD700; }

.navbar.navbar-expand-md {
  background-color: #000000;
  border-color: #FFFFFF; }

div.container.siteTitle {
  background-image: url(yellowed-paper-texture.jpg);
  height: 100%;
  width: 100%; }

.banner {
  background-image: url(yellowed-paper-texture.jpg);
  height: 20vh; }

.black-border-bottom {
  border-bottom: 2px solid black; }

#loginPrompt {
  font-family: "IM Fell English SC", serif; }

/*change btn color by adding custom-btn class*/
/*https://stackoverflow.com/questions/49184471*/
.btn-primary.custom-btn {
  background-color: #000;
  border-color: #000; }

【问题讨论】：

你的问题可能是css，你styles.css文件的内容是什么？
@LuisOrduz 嗨，Luis，检查了我的 CSS，找不到任何令人毛骨悚然的问题。文字在上面，如果你想看的话。谢谢！

标签： html flask jinja2

【解决方案1】：

问题出在这里：

body {
    background-image: url(yellowed-paper-texture.jpg);
}

网址链接必须是url('/static/yellowed-paper-texture.jpg')。

【讨论】：