“CSS 背景图像：url()”无法找到带有“HTML img src=”的图像
我想使用 CSS 将背景图像设置为 div。
虽然我可以在使用 HTML 
当我尝试通过 CSS 设置图像时，出现 404（未找到）： style="background-image: url(/static/img/fon1.jpg)"\
- 我尝试了不同的路径，例如：
../img/fon1.jpg和还有很多其他的。还有带引号和不带引号。 - 我确信 css 和 html 链接正确，因为我可以将背景设置为纯色。
- 如果我在 html 中使用，css 元素也会查找并显示图片。
我觉得我应该只使用
文件夹结构：
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;
}
I would like to set a background image to a div using CSS.
While I can display the image while using HTML <img src="/static/img/fon1.jpg">...
I get a 404 (Not Found) when I try to set the image through CSS:style="background-image: url(/static/img/fon1.jpg)"\
- I have tried different paths like:
../img/fon1.jpgand many others. Also with and withoud quotes. - I am certain that the css and the html are linked correctly as I can set the background to a solid color.
- If I use in html, the css elements find and display the picture as well.
I feel like I should resort to just using <img> and rescaling it to fit the window, but I'd like to know what's wrong with the sucker.
Any kind of help / materials / links / jokes are welcome. Thank you if you take your time. All the best!
Folder structure:
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;
}
如果你对这篇内容有疑问，欢迎到本站社区发帖提问 参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱，如果其他用户或者作者回复了您的评论，将不能在第一时间通知您！
发布评论
评论（3）
您错过了代码中的引号。
You missed the quotes in your code.
我认为问题出在 JetBrains Webstorm 应用程序上。我在托管服务器的另一个应用程序上尝试了相同的配置，然后找到了图像。目前我正在使用 Webstorms 功能在浏览器中打开本地 HTML 文件。似乎它不支持来自 .css 文件的 GET 请求。
更新：
在 Webstorm Live Edit 中引用静态文件时，路径应包含项目文件夹。在我的例子中，img 将位于： http://localhost:63342/projectname/static/img/fon1.jpg
I believe the proble lies in JetBrains Webstorm application. I tried the same configur on another application where I was hosting the server, and then the images were found. Currently I was using Webstorms feature to open local HTML file in browser. Seems that it doesnt support GET requests from .css file.
Update:
When referencing static files in Webstorm Live Edit the path should include the project folder. In my case the img would be located at: http://localhost:63342/projectname/static/img/fon1.jpg
我不知道您试图从哪个文件访问图像。我假设，您正在尝试从
base.html中添加这样的图像。
I don't know from which file you are trying to access the image. I am assuming, You are trying from
base.htmlyou are able to add the image like this.