Html 背景IMG不工作

我正在尝试在我的网页顶部的菜单部分中添加背景。。。我已经上传到了www.ra3manifesto.co.nf 我想一个标志，h1和菜单栏设置在一个背景上，我把我的图像文件。我尝试使用以下CSS代码放置此背景：

.hoofd {
background: url("includes/images/achtergrond.png");
}

---

url似乎没有问题（为了证明这一点，我将要使用的图像放在了第二个容器div中，它清楚地显示在网页上），但背景图像仍然没有出现！！！在过去的一个小时里，我一直在为这个问题绞尽脑汁，谁会来救我：（

使用绝对图像路径：

.hoofd {
 background-image: url("/includes/images/achtergrond.png");
}

---

我认为你的CSS风格是错误的 尝试：

您的路径错误，缺少“/”

应该是：

.hoofd {
  background: url("/includes/images/achtergrond.png");
}

---

可能的路径问题

以这种方式使用背景图像的一个问题是，您需要确保路径是正确的，因为相对路径与CSS声明的位置是相对的

如果您在实际的HTML文件中定义了此样式，那么您可能希望在图像中使用绝对URL（但是，如果您的站点可能会被移动，这可能是一种脆弱的方法），以避免出现以下问题：

/* You can use an absolute path to ensure that the proper file is always used */
background-image: url("http://www.yoursite.com/includes/images/achtergrond.png");

否则，如果在

.css

文件中定义了此样式，则可以确保与此样式相关的任何路径始终保持一致。只需确保从css文件到图像的相对路径正确即可：

/* Your path may vary, but ensure that it is relative from your CSS file */
background-image: url("../../includes/images/achtergrond.png");

使用开发人员工具（F12）进行故障排除

考虑在浏览器中使用开发者工具（F12）来检查相关元素（通过右键单击>检查元素）。这将允许您准确查看

背景图像

属性所指向的位置，以验证其是否正确

其他风格问题

另一个问题是，您需要确保使用“代码>背景图像属性的元素实际上支持它，并将显示它。请考虑使用所建议的样式，以确保元素正确显示图像：

/* Adding these other styles may help the actual image "appear" 
   if this is not a pathing issue */
.hoofd {
   background: url("{your-path-here}")
   background-size: cover; 
   background-repeat: no-repeat;  
   height: 100%;
   width: auto;
   display: block;
}

---

问题在于图像的路径是相对于CSS文件的位置确定的。如果查看浏览器的“Inspector”或“Developer Tools”，您将看到它正在尝试加载以下内容：

http://www.ra3manifesto.co.nf/css/includes/images/achtergrond.png Failed to load resource: the server responded with a status of 404 (Not Found)

---

人们在这里给出的建议是正确的：要么将其设置为绝对路径（即：以“/”开头），要么首先向上遍历一个目录（“/”）。您的测试之所以有效，是因为在网页上进行测试时，URL是相对于网页解析的，而不是相对于CSS文件。

您确定元素中的类拼写正确吗？请包含所有相关代码，以便我们可以查看它的使用情况。请检查类名是否正确检查image路径url正确请举例说明您在打开浏览器的“检查器”中所做的操作，这样您就可以看到请求了哪些文件。像绝对和相对这样的问题应该会立即跳出，因为您会注意到HTTP 404请求。我检查了您的网站，它是404'in，因为它正在尝试加载-相对于您的CSS文件。我刚刚从他的网站粘贴了代码，并进行了更正，这样他就可以清楚地看到问题所在。rgba，重复，滚动都与这个问题无关这不是我高兴的问题哈哈，只是确保答案是准确的，而不使用不必要的代码。是的，你是对的。哇，这里有这么多正确的答案，但都有错误的答案，还有+2…显然路径就是问题所在。这么多白痴在这里…我不知道是谁否决了他们，因为我想这可能是路径问题，或者HTML或CSS文件中的类错误。除此之外，没有太多其他问题可以被真正否决，但有一个小的更正：绝对路径以/-绝对URL包括主机名。两者都可以正常工作，但URL更脆弱（显然）以防网站移动。很好。我更新了措辞并添加了关于脆弱性的注释。

http://www.ra3manifesto.co.nf/css/includes/images/achtergrond.png Failed to load resource: the server responded with a status of 404 (Not Found)