Question

我正在建立我的个人网站，这需要设置背景。我可以通过以下方式做到这一点。

 <header class="masthead" style="background-image: url('img/about-bg.jpg')">

但是，由于我将Flask与Jinja2一起使用。所以我想动态地制作它。

<header
  class="masthead"
  background="{{url_for('static', filename='css/post-bg-01.jpg')}}"
>

可悲的是，它对我不起作用。因此，我尝试在Google上找到一些类似的Q / A，但它确实可以解决我的问题。我希望可以用自己的图像加载图像。所以它可能像：

对于post-01

<header
  class="masthead"
  background="{{url_for('static', filename='css/post-bg-01.jpg')}}"
>

对于post-02

<header
  class="masthead"
  background="{{url_for('static', filename='css/post-bg-02.jpg')}}"
>

有人可以帮助我吗？

jinja2 set background image

https://www.quora.com/How-do-I-set-a-background-in-CSS-via-Flask

Answer 1

我们可以将图像文件名或文件路径从Flask应用程序传递到模板，并将图像呈现为任何HTML元素的背景。

这里，我展示了一个将Flask应用中的博客ID和文件名传递到模板的示例。图像存储在static文件夹中。

目录结构：

├── app.py
├── static
│   └── images
│       ├── 1.jpg
│       └── 2.jpg
└── templates
    └── blog.html

app.py：

from flask import Flask, render_template


app = Flask(__name__, static_folder='static')

@app.route('/blog/<int:blog_id>')
def show_post(blog_id):
    filename = "{}.jpg".format(blog_id)
    return render_template('blog.html', blog_id=blog_id, filename=filename)

blog.html：

<html lang="en">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
  <title>Flask Dynamic Background in Bootstrap Jumbotron</title>
  <!-- Bootstrap core CSS -->
  <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
</head>
<body>
  <main role="main">
    <section class="jumbotron text-center" style="background-image: url({{url_for('static', filename='images/'+filename)}})">
      <div class="container" style="color: white;">
        <h1 class="jumbotron-heading">Example Blog Post No: {{ blog_id }}</h1>
        <p class="lead text-muted">Something short and leading about the collection below—its contents, the creator, etc. Make it short and sweet, but not too short so folks don’t simply skip over it entirely.</p>
        <p>
          <a href="#" class="btn btn-primary my-2">Main call to action</a>
          <a href="#" class="btn btn-secondary my-2">Secondary action</a>
        </p>
      </div>
    </section>
  </main>
</body>
</html>

输出：

访问ID为1的博客帖子：

访问ID为2的博客帖子：

如何在Jinja2中动态设置背景图像？

1 个答案: