我是 HTML 和 CSS 新手，我正在为自己编写在线作品集。当尝试使用 div 和外部 CSS 添加背景图像时，经过一个多小时的直接故障排除后，我无法加载图像。
图像和 CSS 文件来源正确
HTML：
<!DOCTYPE html>
<html>
<head>
<title> A website about myself </title>
<link rel="stylesheet" href="css\app.css"/>
</head>
<body>
<div class="banner">
</div>
</body>
<script src="js\app.js"></script>
</html>
CSS：
*{
margin: 0;
padding: 0;
font-family: sans-serif;
}
.banner{
width: 100%;
height: 100%vh;
background-size: cover;
background-position: center;
background-image: url(/assets/bg/WebsiteBackground.png);
}
我尝试更改图像的位置、文件类型、CSS 文件中“背景图像”行的位置以及 Div 名称。然而 html 文件仍然会导致空白屏幕。
如果您正在处理计算机上的文件，
background-imageindex.html
styles
style.css
assets
bg
WebsiteBackground.png
...那么从 CSS 到图像的路径首先向上一级目录，然后向下进入
assets/bgbackground-image: url(../assets/bg/WebsiteBackground.png);
但是如果你的目录结构是这样的...
index.html
style.css
assets
bg
WebsiteBackground.png
...那么正确的 CSS 声明将是：
background-image: url(assets/bg/WebsiteBackground.png);