CSS“背景图片：url（...）”在我的网站上不起作用

Question

我在Gitlab Pages上创建了我的投资组合。我的style.CSS部分工作。 background-image: url(..)不显示在导航器中。但是，其他所有内容似乎都在起作用。 我的内容在public/img/.png

中

我尝试过：

url(/img/.png);
url(public/img/.png);
url(/public/img/.png);

您可以在这里查看我的代码：https://medjaherirany.gitlab.io/resume/

Answer 1

编辑：我在检查器上进入了您的代码，使用background-image: url("../img/portrait0.png");可以正常工作。我将包括一个屏幕截图。这用于在目录中向后移动。

我希望这会有所帮助。

Answer 2

正如我在您的CSS文件中看到的那样，您已使用

figure {
  background: url(/img/portrait0.png);
  background-repeat: no-repeat;
  background-position: 80% 111px;
  height: 727px;
  background-size: 690px;
  background-color: #f2f2f2;
}

将其更改为

figure {
  background: url("img/portrait0.png");
  background-repeat: no-repeat;
  background-position: 80% 111px;
  height: 727px;
  background-size: 690px;
  background-color: #f2f2f2;
}

实际上您的CSS说要在父目录of "https://medjaherirany.gitlab.io/"中查找img目录

但是您的代码在https://medjaherirany.gitlab.io/resume中，这就是浏览器搜索"https://medjaherirany.gitlab.io/img/portrait0.png"的原因 但实际上它在"https://medjaherirany.gitlab.io/resume/img/portrait0.png"

中

在这里，我更改了背景图片的URL，然后该图片开始工作。

希望这对您有所帮助。随时提出任何疑问。 快乐编码