无法让背景图像显示 - 不路径问题答案

【问题标题】：Can't get background image to show-not path issue无法让背景图像显示 - 不路径问题
【发布时间】：2016-03-08 01:35:54
【问题描述】：

我是新手，所以我确定我只是错过了一些东西。我无法显示背景图像。我尝试了所有不同的路径，还尝试复制网页背景的图像地址，看看是否可行。

这是 HTML：

<!DOCTYPE html>
<html>
<head>
    <title>REDACTED</title>
    <meta charset="utf-8">
    <link rel="stylesheet" type="text/css" href="css/normalize.css">
    <link rel="stylesheet" type="text/css" href="css/style.css">
    <link href='https://fonts.googleapis.com/css?family=Lobster|Open+Sans' rel='stylesheet' type='text/css'>
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>

<body>

<header>
    <div class="logo">
        <h1>REDACTED</h1>
        <p>Aspiring Web Developer</p>
    </div>
    <nav>
        <ul>
            <a href="#"><li class="selected">About Me</li></a>
            <a href="#"><li>Projects</li></a>
            <a href="#"><li>Contact</li></a>
        </ul>
    </nav>
</header>

<main>
    <img src="img/julie.png">
    <h2>About Me</h2>
    <p>REDACTED</p>
</main>

</body>
</html>

这是正文 CSS：

body {
    font-family: 'Open Sans', sans-serif;
    margin: 0px;
    padding: 0px;
    background-image: url('../img/geometry.png');
}

【问题讨论】：

可能区分大小写，请尝试检查
使用这个路径：../img/geometry.png 你必须有这样的文件夹结构：/index.html || /img || /img/geometry.png || /css 并且正文 CSS 必须在 CSS 文件中的 /css 文件夹中。它应该可以完美运行

标签： css background-image

【解决方案1】：

在您的层次结构中，您试图返回一个目录，然后转到 img/geometry.png，这就是问题所在，因为当您在 html 中链接 css 文件时，您不需要使用 '. ./'，可以直接访问img文件夹！

试试这个：

body {
    font-family: 'Open Sans', sans-serif;
    margin: 0px;
    padding: 0px;
    background-image: url('img/geometry.png');
}

别忘了把geometry.png放到img文件夹里！

【讨论】：

两种方法我都试过了： background-image: url('img/geometry.png');和背景图像： url('../img/geometry.png');。两者都不起作用。我很确定后者是正确的路径，因为我的文件结构是 index.html / img / geometry.png
我也尝试将geometry.png放在根文件夹中并使用background-image: url('geometry.png');但这也行不通。 :(

【解决方案2】：

正如@MarcosPerezGude 所说，请确保您的路径与您的目录结构匹配（或者在这种情况下可能反之亦然）。根据您提供的内容，您的目录结构和文件应如下所示：

/index.html
/css
    /style.css
    /normalize.css
/img
    /geometry.png

正如其他人指出的那样，以下内容：

body {
    font-family: 'Open Sans', sans-serif;
    margin: 0px;
    padding: 0px;
    background-image: url('../img/geometry.png');
}

需要在style.css 或normalize.css 中，并具有上面给出的目录结构。

【讨论】：