为什么 CSS background-image url 不显示我的图像，尽管 link 和路径是正确的？

Question

我正在尝试在我正在构建的模拟网页上显示图像作为背景图像。当我尝试使用 css background-image 和 url 时，它不会加载。我试图将图像作为背景图像放在 header class 下的 header 部分，但它无法加载。当我将鼠标悬停在括号中的路径上时，它会显示图像的缩略图，所以我知道它可以访问它。

我已经尝试了一切 - 移动文件，重命名文件，检查我的路径是否正确，使用和删除引号，反斜杠，正斜杠，检查我的 css 路径在我的头部部分是否正确，检查文件扩展名。当我在控制台 'sources' 部分单击文件名并 select 在新的 window 中打开时，它会在新的 window 中显示图像，但 [=34] =] 或任何其他浏览器似乎不会出于某种原因加载文件？！

* {
    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.

中显示

Answer 1

您只需为页眉指定高度 - 因为它只是默认为 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 background-image url 不显示我的图像，尽管 link 和路径是正确的？

Why is CSS background-image url not displaying my image although link and paths are correct?

css

url

background-image