我不明白为什么我的背景图像的 Css 代码不起作用

Question

这似乎是一项非常简单的任务，在一些带有示例的网站上正是这样做的，但它对我不起作用！

我的文件夹是这样的：

project
   resources
      css
         index.css
      images
         pattern.jpeg
         other.jpeg
         another.jpeg
   index.html

我需要为一些文本制作背景。 CSS：

#company-name{
   background-image: url("resources/images/pattern.jpeg");
}

html: <h1 id="company-name">Dasmoto's Arts & Crafts</h1>

我的html可以看到图片，我已经把它放在这里检查了：

<img src="resources/images/hacksaw.jpeg"/> 

就在 src"" - 图片正常显示。

还只是为了检查 CSS 是否可以从 HTML 中理解我的 ID - 而不是背景图像 - 我改变了颜色并且它确实有效，所以 ID 很好。

Answer 1

请记住，您的 CSS 和 HTML 从项目中的不同位置访问图像。 index.html 和资源文件夹位于同一级别，因此可以使用您提供的路径访问。

为了从 css 中找到图像，您需要像这样从根目录开始搜索：

background-image: url('/resources/images/pattern.jpeg');

或者像这样从 css 目录中出来：

background-image: url('../images/pattern.jpeg');