Question

我想在网页顶部的菜单部分找到一个背景...我已将其上传到www.ra3manifesto.co.nf 我想要一个徽标，h1和菜单栏设置在我放在图像文件中的背景上。我试图将此背景与以下CSS代码放在一起：

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

url似乎没有任何问题（为了演示这个我已经放置了我想在第二个容器div中使用的图像并且它清楚地显示在网页上）但仍然没有出现背景图像！在过去的一个小时里，我一直在绞尽脑汁，谁来救我:(

Answer 1

可能的路径问题

以这种方式使用背景图像的一个问题是，您需要确保路径正确，因为相对路径将与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）检查相关元素（通过右键单击＆gt;检查元素）。这应该允许您查看background-image属性指向的确切位置，以验证它是否正确。

其他风格问题

另一个问题是，您需要确保使用background-image属性的元素实际支持它并将显示它。考虑使用scaisEdge's response中建议的样式来确保元素正确显示图像：

/* 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;
}

Answer 2

你的路径不对，＆＃34; /＆＃34;不见了。

应该是：

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

Answer 3

问题是图像的路径是相对于CSS文件的位置确定的。如果您查看浏览器＆＃34; Inspector＆＃34;或者＆＃34;开发者工具＆＃34;，您将看到它正在尝试加载以下内容：

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

人们在这里给出的建议是正确的：要么使它成为绝对路径（即：以＆＃34; /＆＃34;开头），要么首先遍历目录（＆＃34; ../& ＃34）。您的测试工作的原因是因为在网页本身进行测试时，URL是相对于网页解析的 - 而不是相对于CSS文件。

Answer 4

使用绝对图像路径：

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

Answer 5

我觉得你的CSS风格错了尝试：

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

背景IMG不起作用

5 个答案: