Question

查找相对于我的CSS文件夹的图像的相对路径时遇到麻烦。图像，CSS和html的文件夹结构在下面（显示了绝对路径）。

CSS - C:\Users\user\mpi\personal\static\personal\css\home.css
Image location - C:\Users\user\mpi\personal\static\personal\img\ex.jpg
HTML - CSS - C:\Users\user\mpi\personal\templates\personal\home.html

body {
       height: 100%;
       margin: 0;
       padding: 0;
       background-image:url(img/Ex.jpg);
       }

上面的代码不会产生我的背景图片。什么是使背景图像填充的正确相对路径？我什至无法获取绝对文件路径来正确填充图像。我没有运气就看了其他问题和答案。图片位置应该是相对于CSS路径，HTML路径还是相对于两者？

Answer 1

当外部文件中包含CSS时，该CSS中的所有路径均使用外部文件的相对路径。

所以当你有...

background-image:url(img/Ex.jpg);

它正在有效地查看...

background-image:url(css/img/Ex.jpg);

相反，请使用以下...

background-image:url(../img/Ex.jpg);

Answer 2

您必须像在包含的css文件的文件夹中一样写背景图像的路径，因为就像在C：\ Users \ user \ mpi \ personal \ static \ personal \ css \文件夹中一样。因此，在这种情况下，您必须编写background：url（../ img / ex.jpg）;

此外，我看到图像名称不对应；在CSS类中，您已编写了Ex.jpg，在完整的图像路径中，您编写了ex.jpg。 CSS会检测大小写字母。

Answer 3

只需执行

图片 background-image:url(img/Ex.jpg); 或

从../../开始移动两个目录

background-image:url(../../Ex.jpg);

CSS background-image:url(css/Ex.jpg);

或

从../开始移动一个目录

background-image:url(../Ex.jpg);

CSS背景图片未填充

3 个答案: