如何在 Flask 的 CSS 中使用图像?

我的 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在flask应用程序中导入图像?我的文件结构是应用程序->模板,静态。,静态->CSS,图像。, 模板-> .html , CSS> .CSS


动漫人物
浏览 50回答 2
2回答

阿波罗的战车

.css我猜你正在包含静态目录中文件中的 CSS 。Jinja2 不处理这些静态文件。如果您希望避免将此 CSS 块放入 HTML 模板中,那么最好的选择是将此 URL 硬编码到 CSS 文件中:background-image:&nbsp;url('/static/path/to/background.jpg');我使用 CSS 为其赋予了一些功能。尽管您可以尝试在模板中定义一个单独的 CSS 块,该块仅将background-image声明分配给#banner,而其余声明则在.css文件中定义(然后测试您的“功能”)...<style type='text/css'>#banner{&nbsp; background-image: url({{ url_for('static',filename = '../images/banner.jpg')}});}</style>

慕斯709654

所有图像仅使用 render_template() 渲染,因此图像必须通过 *.html 文件渲染。因此,在 html 中导入图像后,问题就解决了。内联 CSS 完成了工作。
打开App,查看更多内容
随时随地看视频慕课网APP

相关分类

Html5