CSS如何从本地磁盘或git获取背景图片？

Question

我试图从本地磁盘获取一张图片作为页面部分的背景，但我无法实际链接它，即使在搜索了相当长的时间之后也是如此。

而且，我怎样才能以同样的方式从github获取它，这样它就不需要存储在我的本地磁盘上。

（这是一张随机图片，因为我刚刚学习它，页面本身也是如此）

在index.html我有：

 <div id="banner">
    <div class="content">
      <h1>RECIPES</h1>
    </div>
  </div>

在 style.css 中：

  #banner {
    background-image: url(C:\Programming\Recipe\cooking\baking.jpg);
    background-size: cover;
    height: 300px;
    width: 100%;
  }
  
  #banner .content h1 {
    border: 3px solid white;
    position: relative;
    top: 50px;
    width: 400px;
    margin: 0 auto;

我尝试过在网上到处找到的选项，这个选项应该是正确的另一个堆栈溢出解决方案，但它没有向我显示任何内容。

这是同一张图片的链接，但位于 github 上 https://github.com/dzu1i/cooking/blob/de881f3104b43d5bd4e9b297fa1af16df8ec461a/baking.jpg

作为 html 中的 URL，应该使用这个（通过复制图像地址，但这也不起作用）： https://github.com/dzu1i/cooking/blob/main/baking.jpg?raw=true

任何人都可以帮助我，任何一个解决方案都可以，我只是想弄清楚为什么它不起作用？

Answer 1

要解决此问题，请将图像文件 (baking.jpg) 移动到与 HTML 文件相同的目录中，并将其添加到

assets

文件夹中，然后使用如下所示的相对路径：

#banner {
  background-image: url('assets/baking.jpg');
  background-size: cover;
  height: 300px;
  width: 100%;
}

Answer 2

我可以通过使用相对路径来使其工作。如果 CSS 文件位于主程序的子目录中，则可以以两个点 (..) 开头的相对路径向上一个目录。

例如，

假设这是您的项目结构：

- main_program_directory
  - css
    - styles.css
  - images
    - background.jpg

CSS 将是：

body {
  background-image: url('../images/background.jpg');
  /* Other styles */
}