时间戳

首页 > 解决方案 > 如何在 CSS 中为 Flask 使用图像？

html - 如何在 CSS 中为 Flask 使用图像？

问题描述

我的 HTML 有<section id="banner">，CSS 有

#banner {
        padding: 12em 0 10em 0;

        background-image: url({{ url_for('static',filename = '../images/banner.jpg')}});

        background-size: cover;
        background-position: top;
        background-attachment: fixed;
        background-repeat: no-repeat;
        text-align: center;
        border-top: 0.5em solid #5385c1;
    }

还有一些@media 的东西。但由于某些问题，图像无法加载。这里有什么问题？其他一切正常。使用拍摄的 HTML 图像<img正在工作。如何通过 CSS 在烧瓶应用程序中导入图像？我的文件结构是 App->templates,static。，静态-> CSS，图像。, 模板-> .html , CSS> .CSS

标签： htmlcssimageflask

解决方案

我猜你是.css在静态目录中的一个文件中包含 CSS。Jinja2 不处理这些静态文件。

如果您希望避免将此 CSS 块放入 HTML 模板，那么您最好的选择是将此 URL 硬编码到 CSS 文件中：

background-image: url('/static/path/to/background.jpg');

我有一些使用 CSS 赋予它的功能。

尽管您可以尝试在模板中定义一个单独的 CSS 块，该块仅将background-image声明分配给#banner，而这些声明的其余部分在.css文件中定义（然后测试您的“功能”）......

<style type='text/css'>
#banner
{
  background-image: url({{ url_for('static',filename = '../images/banner.jpg')}});
}
</style>

推荐阅读