在不同文件夹的 css 中添加背景图像 url 的文件路径应该是什么？答案

【问题标题】：what should be the file path to add background-image url in css from different folder?在不同文件夹的 css 中添加背景图像 url 的文件路径应该是什么？
【发布时间】：2022-11-10 18:31:19
【问题描述】：

我想使用 CSS 'background-image' 选择器添加背景图像。当我尝试从另一个目录添加图像时，图像未加载，我一定是缺少文件路径约定。请帮我语法是：

body {
    background-image: url('tree.png'); /*(image is in the same folder the code is)*/
    background-repeat: no-repeat;
}

但是当我使用下面的代码时；我没有图像。

body {
    background-image: url('G:/Web_Development/bg_img/tree.png');
    background-repeat: no-repeat;
}

【问题讨论】：

你的html文件在哪里？
html 文件在Web_Development 中吗？
试试background-image: url('./tree.png')
如果正文中没有任何内容，则看不到背景图像。
@sampat-aheer 如果该解决方案有效，您能否回复我。如果没有，那么我将以不同的视角工作

标签： html css

【解决方案1】：

谢谢大家帮助我。我试图找出问题所在，并找到了一些您以后也应该避免的解决方案。

第一个问题是 Visual Studio 不会从名为“bg_img“。所以我将所有文件夹的名称从Web开发,Basic_Html和bg_img至Web开发,基本HTML，和bgimg分别。（此问题可能仅适用于 Visual Studio）。

当我从 bg_img 中删除下划线时，url 就成功加载了图片。

background:#ffffff url('/bgimg/tree.png/') no-repeat top right;

其次，我发现只有当代码文件夹和图像文件夹位于同一文件夹中时，Visual Studio 才会从文件夹中加载图像。在我的情况下，代码的两个文件夹（基本HTML) 和图像文件夹 (bgimg) 位于同一个文件夹下Web开发.

我这么说是因为当我尝试从名为墙纸这与 WebDevelopment 平行，它没有加载图像。但是当我从文件资源管理器打开相同的 html 文件时，它工作正常。所以Visual Studio的live server可能有问题。

我正在添加图片以供参考。

代码：

VS执行：

从文件资源管理器打开：

【讨论】：