Class .css 中定义的背景未显示在网页上。图像路径无法识别。为什么?
Class background defined in .css not showing on webpage. Path to image not recognized. Why?
我做了一个最基础的html和一个最基础的css。我想先放一张背景图片。我不想在 html 中定义样式,而是在单独的 css 文件中定义样式。
我这样做了:
index.html:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta content="width=device-width, initial-scale=1.0" name="viewport">
<title>The Ultimate Movies DB</title>
<meta content="A Movie Database" name="description">
<meta content="Movie, Database, API" name="keywords">
<!-- Import own files -->
<link rel="stylesheet" href="static/css/style.css">
</head>
<body>
<div class="first-div">
</div>
<script src="static/js/script.js"></script>
</body>
</html>
和
style.css:
.first-div {
background-image: url("../img/home.jpg");
background-size: cover;
}
但是背景图片没有显示。
项目结构:
这是来自浏览器控制台的消息:
Failed to load resource: the server responded with a status of 404 (Not Found) home.jpg
图片无法识别。
我在 css 文件中放置了图像的相对路径。我尝试了几种写路径的组合,但我无法弄清楚哪里出了问题。
在 index.html
中调用的 css 文件中存在路径错误。正确的路径是 <link rel="stylesheet" href="../static/css/style.css"/>
我做了一个最基础的html和一个最基础的css。我想先放一张背景图片。我不想在 html 中定义样式,而是在单独的 css 文件中定义样式。
我这样做了:
index.html:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta content="width=device-width, initial-scale=1.0" name="viewport">
<title>The Ultimate Movies DB</title>
<meta content="A Movie Database" name="description">
<meta content="Movie, Database, API" name="keywords">
<!-- Import own files -->
<link rel="stylesheet" href="static/css/style.css">
</head>
<body>
<div class="first-div">
</div>
<script src="static/js/script.js"></script>
</body>
</html>
和
style.css:
.first-div {
background-image: url("../img/home.jpg");
background-size: cover;
}
但是背景图片没有显示。
项目结构:
这是来自浏览器控制台的消息:
Failed to load resource: the server responded with a status of 404 (Not Found) home.jpg
图片无法识别。
我在 css 文件中放置了图像的相对路径。我尝试了几种写路径的组合,但我无法弄清楚哪里出了问题。
在 index.html
中调用的 css 文件中存在路径错误。正确的路径是 <link rel="stylesheet" href="../static/css/style.css"/>