如何在我的 Flask 应用程序中使用 CSS 添加背景？

Question

我是 Flask 的新手，正在尝试向我的 Web 应用程序的所有页面添加背景图像。我已将背景图像保存为项目中“静态”文件夹内的“图像”文件夹中的“背景图像.jpg”。这是我的“base.html”文件，它扩展到我的所有其他文件。

{% extends 'bootstrap/base.html' %}
<link rel="stylesheet" href="{{ url_for('static', filename='css/custom-styles.css') }}">


{% block title %}
Flog
{% endblock %}

{% block head %}
{{ ckeditor.load() }}
{{ super() }}
{% endblock %}

{% block navbar %}
    {% include '_navbar.html' %}
{% endblock %}


{% block content %}
<div class="jumbotron background-img">
    {% with messages = get_flashed_messages(with_categories=true) %}
        {% if messages %}
            {% for category, message in messages %}
            <div class="alert alert-{{ category }}" role="alert">
                {{ message }}
            </div>
            {% endfor %}
        {% endif %}
    {% endwith %}    
    {% block sub_content %}
    {% endblock %}
</div>
{% endblock %}

这是我的 css 文件，保存在名为“custom-styles.css”的“静态”文件夹中的“css”文件夹中。

.background-img{
    background-image: url('..images/background-image.jpg');

}

当我运行应用程序时，jumbotron 正在工作，但它只显示一个灰色框并且没有背景图像。有人能告诉我我做错了什么吗？

谢谢。

Answer 1

.background-img{
background-image: url('../images/background-image.jpg');
}

尝试在两个句点之后添加正斜杠，看起来这可能只是 css 文件如何访问图像文件夹的问题。

Answer 2

背景图片的路径必须正确。如果该文件是静态文件，那么您需要背景图像的静态文件路径。

例如，如果 background-image.jpg 的路径是：

path-to-static/images/background-image.jpg

然后你需要使用 ..images/background-image.jpg 而不是：

.background-img{
    background-image: url('/static/images/background-image.jpg');

}

我相信这是静态文件的默认路径，尽管您可以对该位置进行配置更改。