为什么我的背景图片没有显示在我的 github.io 上？

Question

我为我的背景添加了 2 张 svg 图片，一张在顶部，另一张在底部。使用我的本地主机（实时服务器），它们毫无问题地显示出来，但现在上传到 github 它根本不显示。我不知道出了什么问题，因为所有资产（带图像的文件夹）都已正确上传。 Chrome 显示此错误： 2 获取 https://ruth9403.github.io/assets/images/bg-top.svg 404enter image description here

我是一个菜鸟，刚开始尝试网页 :'v，也是 github 的新手。这是我的 github 存储库： https://github.com/ruth9403/pricing-toggle-hamburger.github.io

这是我的 github url 项目： https://ruth9403.github.io/pricing-toggle-hamburger.github.io/

非常感谢您的宝贵时间和善良的灵魂！:Denter image description here

Answer 1

项目站点位于 http(s)://<user>.github.io/<repository>

你的情况：https://github.com/ruth9403/pricing-toggle-hamburger（不是https://github.com/ruth9403/pricing-toggle-hamburger.github.io）

确保选中 settings of your repository 以激活页面发布。
确保 publishing source is master（它将是 gh-pages 分支，否则默认情况下用于项目页面）。

Answer 2

您的路径有问题。您的 CSS 文件位于文件夹 assets 中。解析后的绝对 CSS 路径指向 https://ruth9403.github.io/pricing-toggle-hamburger.github.io/assets/assets/images/bg-bottom.svg，它使 assets 文件夹加倍。

因此您必须将背景的图像路径更改为 images/bg-bottom.svg。基本上你的相对路径有问题。对于 CSS 文件，始终使用 CSS 文件所在的文件夹作为遍历的 "starting point"。

应该可以解决：

body {
    background: url("images/bg-bottom.svg"), url("images/bg-top.svg");
}

至少对我有用:P.

为什么我的背景图片没有显示在我的 github.io 上？

Why my Background-image is not showing up on my github.io?

url

github

background-image