LESS 是一种基于 CSS 的预处理器，它提供了诸如变量、嵌套、Mixin 等功能，让我们能够更方便灵活地编写样式代码。然而，有时候我们使用 LESS 写的样式中，包含的背景图片却无法正确显示，这是令人非常烦恼的问题。本文将介绍原因和解决办法，以及与此相关的知识和技巧。
问题描述
在 LESS 中，我们使用 background-image 属性设置背景图片时，通常使用相对路径来引用图片文件。比如：
.my-element {
background-image: url("../images/bg.png");
}这里的 ../images/bg.png 表示该图片文件位于当前样式文件的上层目录的 images 子目录中。然而，当我们编译 LESS 文件生成相应的 CSS 文件后，在浏览器中预览页面时，可能会发现背景图片无法正确显示，而是显示为一个红色的小方框，如下图所示：
这个问题的出现，是由于相对路径的计算方式和 CSS 文件的引用方式有关。
在上面的例子中，LESS 文件和图片文件属于同一个项目目录。当浏览器加载 HTML 页面时，会根据页面的相对路径（即 URL）来寻找所需的资源文件，比如 CSS 文件和图片文件。假设 HTML 文件位于项目根目录的 public 子目录中，那么引用 CSS 文件时应该写成：
<link rel="stylesheet" href="../styles/main.css">
这里的 ../styles/main.css 表示该 CSS 文件位于当前 HTML 文件的上层目录的 styles 子目录中。但是，由于浏览器是在 HTML 文件的上下文中加载资源文件的，因此对于 CSS 文件来说，它的相对路径应该是从 HTML 文件出发，而不是从 LESS 文件出发。
所以，如果我们在 LESS 文件中使用相对路径引用背景图片，而 CSS 文件和图片文件又位于不同的目录中，就会出现路径计算错误的问题，导致图片无法正确显示。比如，如果我们将图片文件放到 public/images 目录中，那么正确的写法应该是：
.my-element {
background-image: url("/images/bg.png");
}这里的 /images/bg.png 表示图片文件的绝对路径，而非相对路径。这样，浏览器在加载样式时就可以正确地找到图片文件，使其成功显示。
解决办法
除了上述的路径问题，还有其他一些因素可能导致 LESS 中的背景图片无法正确显示。下面是一些常见的解决办法：
1. 相对路径写法
如果你的图片文件与 CSS 文件在同一个目录下，或者它们在相同的上层目录中，那么你可以使用相对路径来引用图片文件。比如：
.my-element {
background-image: url("bg.png");
}这里的 bg.png 表示该图片文件与 CSS 文件在同一个目录下。
2. 绝对路径写法
如果你知道图片文件的绝对路径，也可以直接使用绝对路径来引用图片文件。比如：
.my-element {
background-image: url("/images/bg.png");
}这里的 /images/bg.png 表示该图片文件在项目的根目录下的 images 目录中。注意，这种方式在不同环境中可能有所差别，需要根据具体情况进行调整。
3. 使用变量
为了避免写死路径，我们可以使用 LESS 中的变量来代替路径。比如：
@img-dir: "/images/";
.my-element {
background-image: url("@{img-dir}bg.png");
}这样，我们只需要在一个地方修改 @img-dir 变量的值，就可以同时更新所有的背景图片路径。
4. 使用 URL 函数
如果你需要引用来自外部网址的图片文件，那么可以使用 CSS 的 url() 函数来实现。比如：
.my-element {
background-image: url("https://example.com/images/bg.png");
}这里的 url("https://example.com/images/bg.png") 表示该图片文件位于外部网址 https://example.com 下的 images 目录中。需要注意的是，在使用外部网址时要确保图片文件能够被访问。
总结
LESS 是一种强大的 CSS 预处理器，可以提高我们的开发效率和样式表的可维护性。但是，在使用 LESS 时，我们需要注意正确地处理背景图片的路径，避免出现无法正确显示的情况。本文介绍了常见的路径写法和解决办法，供大家参考。希望本文能够对你有所帮助，谢谢阅读！
示例代码
以下是一个完整的示例代码，演示如何在 LESS 中正确地引用背景图片：
-- -------------------- ---- -------
--------- -----
------
------
---------------------
----- ---------------- --------------------------
-------
------
---------------
---- -------------------------
-------
-------@img-dir: "/images/";
.my-element {
width: 200px;
height: 200px;
background-image: url("@{img-dir}bg.png");
background-size: cover;
}其中，bg.png 图片文件位于项目的根目录下的 images 目录中。可以在浏览器中查看效果。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/64c96ba15ad90b6d0416e7b8