html 中未显示本地背景图片

Question

我正在尝试让背景图像为我开发的系统的 html 输出工作。我可以正确输出页面，但是在引用本地机器上的文件时背景图像不能正确显示；但是，如果我从外部站点引用相同的图像，它会正常工作。

我将 html 文件保存在 <USER_DOCUMENTS>\Test_HTML.html，示例本地图像保存在 <USER_DOCUMENTS>\images\test_image.png。我在示例中使用的图像是 this，但是任何可以外部引用的 suitable 图像都应该足够了。

Test_HTML.html

<html>
   <head>
      <style>
         td{font-family:arial; font-size:12pt; border:solid black 1pt;}
         .test_class{background-image:url(images\test_image.png); background-repeat:repeat; background-position:top left;}
      </style>
   </head>
   <table>
      <tr>
         <td class="test_class" style="width:40pt">Baap</td>
         <td class="test_class" style="width:60pt">Beep</td>
         <td class="test_class" style="width:80pt">Biip</td>
         <td class="test_class" style="width:100pt">Boop</td>
         <td class="test_class" style="width:120pt">Buup</td>
      </tr>
   </table>
   <hr/>
   <img src="images\test_image.png"/>
</html>

在浏览器中查看时（在 Chrome、Firefox 和 IE 中测试），水平线下方的图像显示正确，但在 table 中没有显示背景。但是，如果将 url(images\test_image.png) 替换为 url(<EXTERNAL_FILE_LOCATION>)，则背景图像会正确显示。期望的行为是能够使用本地文件并获得与使用外部文件位置时相同的输出。

对于如何让它在本地系统上正常工作，我有点不知所措，如有任何帮助，我们将不胜感激。

Answer 1

将斜杠“\”替换为“/”。 URL 必须在正斜杠中

Answer 2

就像我在上面的评论中提到的，“\”或反斜杠通常用于指代路径的绝对路径，是指代文件位置的Windows 标准。我们使用“/”或正斜杠，因为它们用于指代当前工作文件的相对路径。所以，

./指的是当前工作目录。

../指的是父目录。

./images/ 指的是与工作目录位于同一位置的文件夹，同样要访问文件夹内的文件，您可以使用正斜杠来引用它。

至于为什么在 img 标签中使用反斜杠路径但在 css 中却不起作用，我不太确定。但这不是一个好的做法，也绝对不是正确的做事方式。希望对你有帮助。

html 中未显示本地背景图片

Local background image not displaying in html

html

css

image

background-image