背景图像属性在 vs 代码实时服务器之外不起作用答案

【问题标题】：Background-image property isnt working outside of vs code liveserver背景图像属性在 vs 代码实时服务器之外不起作用
【发布时间】：2020-02-26 17:36:49
【问题描述】：

我在这里的第一个问题。抱歉，如果我的格式/语法错误。另外，我只是在学习网络开发。

所以我有一个包含以下内容的 .css 文件：

.bgimg-1 {
  background-image: url('/img/back2.jpg');
  min-height: 100%;
}

.bgimg-2 {
  background-image: url('/img/back3.jpg');
  min-height: 400px;
}

.bgimg-3 {
  background-image: url('/img/back4.jpg');
  min-height: 400px;
}

我的问题是 Html 文件在实时服务器中正确显示图像，但如果我直接双击 index.html 则不能。现在听我说，我尝试这样做 '../img/back3.jpg' ，因为它是在另一个答案中建议的相同问题，但对我来说，它不会解决它。图像仍然不会显示。现在疯狂的是，如果我在新选项卡中打开损坏的图像链接，地址栏中的路径会显示 'C:/Users/Username/Desktop/img/back3.jpg' '../' 如果我删除 '../' 它会显示 'C:/img/back3.jpg' idk 怎么回事。请帮帮我。

澄清这是我系统上 img 文件夹的路径。 C:/Users/用户名/Desktop/Project/img

如果我使用 '../img/back3.jpg'，这是它显示的路径。 'C:/Users/Username/Desktop/img/back3.jpg'

如果我使用 '/img/back3.jpg'，这是它显示的路径。 'C:/img/back3.jpg'

再次重申：在实时服务器中，上述任何方法都有效。

【问题讨论】：

你试过'./img'吗？
你也可以添加你的html路径吗？
好的，我按照 MaxK 的建议尝试了 './img'。我有一个可以在 src 中使用 './' 正确显示图像。谢谢，这解决了我的部分问题:)。但是为 CSS 这样做并没有改变。应用这些类的元素仍然不显示背景。 RezaHashemi 这里是我的 html 路径：C:\Users\Username\Desktop\Project\index.html

标签： html css

【解决方案1】：

好的，@MaxK 的建议让我得到了答案。我仍然不知道 './' 和 '../' 是做什么的，但我会研究它。话虽如此，我通过将 CSS 路径更改为 '.\css\base.css' 解决了我的问题，即添加了一个 '.'这修复了一些其他的视觉元素，我很震惊，我之前没有注意到它们丢失了。

bgimages 仍然不会显示，所以我尝试添加 '..\img\' 作为 URL。这以某种方式解决了它。根本没有改变文件夹结构。无法理解如何'。在某个地方工作，在其他地方工作。

澄清：添加了一个“。”在 CSS 文件的路径中，其中一个链接标题中的样式表。

在 bgimg 类图像 URL 中添加了一个“..”。这样就解决了。

【讨论】：