如何在我的Flask应用程序中使用CSS添加背景？
如何在我的Flask应用程序中使用CSS添加背景？
提问于 2020-02-21 00:40:26
我是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 %}这是我的css文件，保存在名为“custom-styles.css”的“static”文件夹中的“css”文件夹中。
.background-img{
background-image: url('..images/background-image.jpg');
}当我运行应用程序时，jumbotron正在工作，但它只显示一个灰色的框，没有背景图像。有人能告诉我我哪里做错了吗？
谢谢。
回答 2
Stack Overflow用户
发布于 2020-02-21 00:44:17
.background-img{
background-image: url('../images/background-image.jpg');
}尝试在两个句点后添加正斜杠，看起来可能只是css文件访问图像文件夹的方式有问题。
Stack Overflow用户
发布于 2020-02-21 00:46:42
背景图像的路径必须正确。如果该文件是静态文件，则需要背景图像的静态文件路径。
例如，如果background-image.jpg的路径为：
path-to-static/images/background-image.jpg然后，您需要使用以下命令来代替..images/background-image.jpg：
.background-img{
background-image: url('/static/images/background-image.jpg');
}我相信这是静态文件的默认路径，尽管您可以对该位置进行配置更改。
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/60324741
复制相关文章
相似问题
腾讯云开发者
