背景图像显示在实时服务器上，不显示在 Github 页面上

Question

我的背景图片在实时服务器上完美运行，但在 Github 页面上却不显示。我读到 Github 页面区分大小写，您需要将 .jpg 更改为 .JPG。这样做之后，它使我所有的其他图像都可以工作，除了这个背景图像。这是代码行

.main-image {
    display: flex;
    justify-content: center;
    background-image: linear-gradient( to bottom, rgba(0, 0, 0, 0.6), rgba(0, 0, 0, 0.6) ), url("../images/st-george.JPG");
    height: 200px;
    background-size: cover;
    height: 97rem;
}

我也试过了：

 url("/images/st-george.JPG")//Without the two dots before images "../images"

这同样适用于实时服务器，但不适用于 Github 页面。

当我尝试时

 url("./images/st-george.JPG")//One dot instead of two

它不适用于实时服务器或 Github 页面。

编辑：链接到我的 gitgub 页面： https://calebm5577.github.io/Orthodox-Church-Website/index.html github代码链接： https://github.com/Calebm5577/Orthodox-Church-Website

Answer 1

从您位于css/style.css 的css stylesheet 读取：

.main-image {
  display: flex;
  justify-content: center;
  background-image: linear-gradient(to bottom, rgba(0, 0, 0, 0.6), rgba(0, 0, 0, 0.6)), url("./images/st-george.JPG");
  height: 200px;
  background-size: cover;
  height: 97rem; }

与the code on your repository匹配

所以它试图从不存在的css/images/st-george.JPG 获取图像

如果您将其更改为以下内容，它将起作用：

linear-gradient(to bottom, rgba(0, 0, 0, 0.6), rgba(0, 0, 0, 0.6)), url(../images/st-george.jpg)

你的文件名是st-george.jpg，不是st-george.JPG