我的 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應(yīng)用程序中導(dǎo)入圖像?我的文件結(jié)構(gòu)是應(yīng)用程序->模板,靜態(tài)。,靜態(tài)->CSS,圖像。, 模板-> .html , CSS> .CSS
2 回答

阿波羅的戰(zhàn)車
TA貢獻(xiàn)1862條經(jīng)驗 獲得超6個贊
.css
我猜你正在包含靜態(tài)目錄中文件中的 CSS 。Jinja2 不處理這些靜態(tài)文件。
如果您希望避免將此 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>

慕斯709654
TA貢獻(xiàn)1840條經(jīng)驗 獲得超5個贊
所有圖像僅使用 render_template() 渲染,因此圖像必須通過 *.html 文件渲染。因此,在 html 中導(dǎo)入圖像后,問題就解決了。內(nèi)聯(lián) CSS 完成了工作。
- 2 回答
- 0 關(guān)注
- 165 瀏覽
添加回答
舉報
0/150
提交
取消