我正在尝试在我正在构建的模拟网页上显示图像作为背景图像。当我尝试使用 css background-image 和 url 时，它不会加载。我试图将图像作为背景图像放在标题类下的标题部分，但它不会加载。当我将鼠标悬停在括号中的路径上时，它会显示图像的缩略图，因此我知道它可以访问它。
我已经尝试了一切 - 移动文件、重命名文件、检查我的路径是否正确、使用和删除引号、反斜杠、正斜杠、检查我的 head 部分中的 css 路径是否正确、检查文件扩展名。当我单击控制台“源”部分中的文件名并选择在新窗口中打开时，它会在新窗口中显示图像，但 Chrome 或任何其他浏览器似乎不会出于某种原因加载该文件？ !
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
html {
font-family: 'Raleway', sans-serif;
font-weight: 300;
font-size: 20px;
}
header {
background-image: url(resources/img/table_window.jpg);
}<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="style.css">
<link href="https://fonts.googleapis.com/css?family=Raleway:300,400,400i,700" rel="stylesheet">
<title>Phil My Glass</title>
</head>
<body>
<header>
<div class="top-section">
</div>
</header>
</body>
</html>如果我使用 img 标签将文件放入 HTML 中，文件加载和显示会很好，但不会从 css 显示。
最佳答案
你只需要为你的标题指定一个高度 - 因为它只是默认为 0 像素高:-)
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
html {
font-family: 'Raleway', sans-serif;
font-weight: 300;
font-size: 20px;
}
header {
background-image: url(https://picsum.photos/200/300);
height: 100px;
}<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="style.css">
<link href="https://fonts.googleapis.com/css?family=Raleway:300,400,400i,700" rel="stylesheet">
<title>Phil My Glass</title>
</head>
<body>
<header>
<div class="top-section">
</div>
</header>
</body>
</html>关于css - 为什么 CSS background-image url 不显示我的图像，尽管链接和路径是正确的？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/55379091/