当在地址栏中输入图像的路径时，浏览器会打开图像，但不会将其显示为背景图像。为什么？答案

【问题标题】：The browser opens the image when its path is typed in address-bar, but does Not display it as background-image. Why?当在地址栏中输入图像的路径时，浏览器会打开图像，但不会将其显示为背景图像。为什么？
【发布时间】：2016-02-12 08:54:40
【问题描述】：

在这个 SSCCE 中，我使用了两个 divs 和 background-image，它们的值指向同一个图像，但使用不同的路径。第二个div中不显示图片。

第二个 div 在我的真实代码中演示了这个问题。 URL 的 C:/xampp/htdocs 部分是动态出现的，我使用 PHP 将其附加到路径的其余部分，而 URL 的其余部分始终保持不变。

如您所见，我在开发过程中使用本地 XAMPP 服务器，但此图像未显示。

当我将此路径（即 C:/xampp/htdocs/Tests/Test44/index.png）复制粘贴到 Chrome 的地址栏中时，它会将其更改为 file:///C:/xampp/htdocs/Tests/Test44/index.png，并显示图像。

我能做些什么来解决这个问题？

标记：

<!DOCTYPE html>

<html>

<head>
    <title>Test</title>
    <meta charset="utf8" />
    <link type="text/css" rel="stylesheet" href="index.css" />
</head>

<body>

    <div class="the-div" style="background-image:url(index.png); background-repeat:no-repeat; background-position:center center;">Instagram</div>

    <div class="another" style="background-image:url(C:/xampp/htdocs/Tests/Test44/index.png); background-position:center center; background-repeat:no-repeat;">Twitter</div>

</body>

CSS：

body {
    background-color:black;
}

div {
    font: 0px/0 a;
    border: coral 5px solid;
    margin:5px;
    height:150px;
    width:150px;
}

【问题讨论】：

文件路径与 URL 不同

标签： php html css url path

【解决方案1】：

如前所述，文件路径与 URL 不同。

只需删除“C:/xampp/htdocs”部分，就会显示背景图像。

Difference between absolute and relative URL

【讨论】：