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

【问题标题】：Why is CSS background-image url not displaying my image although link and paths are correct?为什么 CSS background-image url 不显示我的图像，尽管链接和路径是正确的？
【发布时间】：2024-05-22 18:25:02
【问题描述】：

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

我已经尝试了所有方法 - 移动文件、重命名文件、检查我的路径是否正确、使用和删除引号、反斜杠、正斜杠、检查我的头部中的 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 显示。

【问题讨论】：

你需要使用'...'或"..."'resources/img/table_window.jpg'
@Matt.Hamer5 不，没关系 - 它应该可以工作:-)
@coops 哦，哇，我从事 Web 开发已经很多年了，但从来不知道，哈哈。每天学习新东西

标签： css url background-image

【解决方案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>

【讨论】：