Html 不同Jinja2模板的不同背景图像_Html_Flask_Jinja2

Html 不同Jinja2模板的不同背景图像

html flask

Html 不同Jinja2模板的不同背景图像,html,flask,jinja2,Html,Flask,Jinja2,我在Jinja2中有多个扩展布局的模板。他们需要不同的背景。我已经按照这里文档中的说明进行了操作 , 但似乎无法让他们工作。思考出了什么问题以下是layout.html的相关部分： <html> <head> {% block head %} <title>Verbatim: Book Reviews & Recommendations</title> {% with message

我在Jinja2中有多个扩展布局的模板。他们需要不同的背景。我已经按照这里文档中的说明进行了操作 , 但似乎无法让他们工作。思考出了什么问题

以下是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>

问题就在这里：

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

url链接必须是

url（'/static/yellowded paper texture.jpg'）

你的问题可能是css，你的

styles.css

文件的内容是什么？@LuisOrduz Hi Luis，检查了我的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; }

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