Html 如何在我的烧瓶应用程序中使用CSS添加背景。？

我是Flask的新手，正在尝试向我的web应用程序的所有页面添加背景图像。我已将背景图像作为“background image.jpg”保存在项目的“static”文件夹中的“images”文件夹中。这是我的“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 %}

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

谢谢

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

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

---

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

背景图像的路径需要正确。如果该文件是静态文件，则需要背景图像的静态文件路径

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

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

然后，您需要使用以下选项，而不是..images/background-image.jpg：

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

}

---

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

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

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

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

然后，您需要使用以下选项，而不是..images/background-image.jpg：

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

}

---

我认为，这是静态文件的默认路径，不过您可以对该位置进行配置更改。

url是错误的。

.images

类型语法是特定于python的。请尝试

。/images/background image.jpg

或

/static/images/background image.jpg

url错误。

.images

类型语法是特定于python的。试试

。/images/background image.jpg

或

/static/images/background image.jpg

谢谢-我已经试过了，但还是没有运气，只有灰盒！这可能与背景图像的大小和内容块的大小有关——我是否应该改变这一点？您是否检查了浏览器（如Chrome）上的开发人员控制台，以查看资源是否正确加载？这基本上是一个CSS问题，尽管它是由flask交付的，所以问题在于语法以及浏览器是否能够正确加载资源。如果没有加载资源，检查是否可以直接浏览到它，以及通过URL访问图像时看到的内容。验证路径是否正确的一种方法是在模板文本中的某个位置使用{URL_for（'static'，filename='images/background image.jpg'）}，并查看Flask为您生成的路径。然后你就可以使用这条路了。谢谢-我已经试过了，但还是没有运气，只有灰色的盒子！这可能与背景图像的大小和内容块的大小有关——我是否应该改变这一点？您是否检查了浏览器（如Chrome）上的开发人员控制台，以查看资源是否正确加载？这基本上是一个CSS问题，尽管它是由flask交付的，所以问题在于语法以及浏览器是否能够正确加载资源。如果没有加载资源，检查是否可以直接浏览到它，以及通过URL访问图像时看到的内容。验证路径是否正确的一种方法是在模板文本中的某个位置使用{URL_for（'static'，filename='images/background image.jpg'）}，并查看Flask为您生成的路径。然后可以使用该路径。