我想使用 CSS 將背景影像設定為 div。
雖然我可以在使用 HTML 時顯示影像<img src="/static/img/fon1.jpg">...
當我嘗試通過 CSS 設定影像時得到 404（未找到）：
style="background-image: url(/static/img/fon1.jpg)"\
- 我嘗試了不同的路徑，例如：
../img/fon1.jpg以及許多其他路徑。也有和沒有引號。 - 我確定 css 和 html 鏈接正確，因為我可以將背景設定為純色。
- 如果我在 html 中使用，css 元素也會找到并顯示圖片。
我覺得我應該只使用<img>并重新調整它以適應窗戶，但我想知道吸盤出了什么問題。歡迎任何形式的幫助/材料/鏈接/笑話。謝謝你花時間。一切順利！
檔案夾結構：
project
└─static
└─ img
| fon1.jpg
└─ stylesheet
| styles.css
└─ base.html
HTML
<link rel="stylesheet" type="text/css" href="/static/stylesheet/styles.css">
...
<body>
<div class="background1"></div>
<div class="background2" style="background-image: url('/static/img/fon1.jpg')"></div>
</body>
...
CSS
.background1 {
background-image: url(../img/fon1.jpg);
height: 960px;
width: 1280px;
}
.background2 {
background: red;
height: 960px;
width: 1280px;
}
uj5u.com熱心網友回復：
您錯過了代碼中的引號。
.background1 {
background-image: url('../img/fon1.jpg');
height: 960px;
width: 1280px;
}
uj5u.com熱心網友回復：
我相信問題在于 JetBrains Webstorm 應用程式。我在托管服務器的另一個應用程式上嘗試了相同的配置，然后找到了影像。目前我正在使用 Webstorms 功能在瀏覽器中打開本地 HTML 檔案。似乎它不支持來自 .css 檔案的 GET 請求。
更新：在 Webstorm Live Edit 中參考靜態檔案時，路徑應包含專案檔案夾。在我的情況下，img 將位于：http://localhost:63342/projectname/static/img/fon1.jpg
uj5u.com熱心網友回復：
我不知道您嘗試從哪個檔案訪問影像。我假設，你正在嘗試從base.html
您可以像這樣添加影像。
<img src="./img/fon1.jpg">
轉載請註明出處，本文鏈接：https://www.uj5u.com/shujuku/437727.html
標籤：html css 图片 背景 http-status-code-404
上一篇：如何在表格中居中影像？