背景图像未显示在网站的 Github 页面上答案

【问题标题】：Background Images not showing on Github Pages for Website背景图像未显示在网站的 Github 页面上
【发布时间】：2017-05-27 04:45:58
【问题描述】：

我查看了 Stack Overflow 上有关此问题的其他一些线程，但由于某种原因，它们似乎无法正常工作。我检查了图像的路径目录之类的东西，我认为它是正确的。这是我在 github 页面上的网站的 repo 链接：https://github.com/lawrencecheng123/lawrencecheng123.github.io

在我的 repo 中有一个“Seattle.jpg”图像，我试图将其设置为我网站首页的背景，该图像由“index.html”第 81 行的“fstPage”类引用。 html”文件和repo中“index.css”文件的第321行。

感谢您的帮助！

【问题讨论】：

标签： html css github github-pages

【解决方案1】：

它失败了，因为你的文件命名错误。在您的 index.css 中，您想使用一个名为 Seattle.JPG 的文件。

您的文件名为Seattle.jpg。修正结尾并添加https://。

这是正确的链接：https://lawrencecheng123.github.io/Seattle.jpg

完整的 CSS：

.fstPage {
    background-image:url("https://lawrencecheng123.github.io/Seattle.jpg");
    /*background-color: lightgray;*/
    height: 700px;
    width:100%;
    background-size:cover;
}

工作sn-p：

.fstPage  {
    background-image:url("https://lawrencecheng123.github.io/Seattle.jpg");
    /*background-color: lightgray;*/
    height: 700px;
    width:100%;
    background-size:cover;
}

&lt;div class="fstPage"&gt;&lt;/div&gt;

【讨论】：

感谢您的回复。我之前为链接做过，但它仍然无法加载。我还在另一个线程上读到使用 .JPG 会起作用，所以我也在尝试这种方式。但是，对于这两种方式，它只会为我显示一个白页
您是否加入了index.css？在您的index.html 中看不到它。
感谢您的 sn-p。它似乎在那里工作。但是，当我将它放入主文件时，由于某种原因它仍然显示为空白。
我将带有https的新链接放入index.css中的fstPage类中，并且我在index.html中也有fstPage。不完全确定为什么它在 sn-p 中有效，但在我的主代码中无效
您的index.css 似乎没有包含在内。尝试在您的脑海中添加<link rel="stylesheet" href="index.css">。

【解决方案2】：

我正在搜索所有论坛。但没有一个对我有用。对我来说唯一的解决方法是在head 中更改stylesheets 的顺序

我的意思是，如果您使用多个样式表，包括来自 bootstrap cdn 和本地保存的样式表，请始终将本地样式表放在最前面。

这样

 <link rel="stylesheet" href="style.css">
    <script src="https://kit.fontawesome.com/yourcode.js" crossorigin="anonymous"></script>
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" rel="stylesheet"

【讨论】：

【解决方案3】：

首先在你的 index.html 文件中导入 index.css 文件

更改（1）：

<link rel="stylesheet" href="index.css">

然后你必须更新你的类，如下所述

更改（2）：

.fstPage {
            background-image:url("Seattle.jpg");
            /*background-color: lightgray;*/
            height: 700px;
            width:100%;
            background-size:cover;
        }

我希望它也对你有用

【讨论】：

@Lawrence Chengspan>