网站的 Github 页面上未显示背景图片

Question

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

在我的 repo 中有一张 "Seattle.jpg" 图片，我试图将其设置为我网站首页的背景，该图片由 "fstPage" class 引用在回购中 "index.html" 文件的第 81 行和 "index.css" 文件的第 321 行。

感谢您的帮助！

Answer 1

失败是因为你给文件命名错误。在 index.css 中，您想使用名为 Seattle.JPG.

的文件

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

这是正确的link：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;
}

工作片段：

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

<div class="fstPage"></div>

Answer 2

首先在您的 index.html 文件中导入 index.css 文件，例如

更改 (1) :

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

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

更改(2)：

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

我希望它也适合你

Answer 3

我正在搜索所有论坛。但是 none 其中对我有用。对我来说唯一的解决方法是更改 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"

网站的 Github 页面上未显示背景图片

Background Images not showing on Github Pages for Website

html

css

github

github-pages