来自硬盘的css图像

我将要构建一个GUI，我正试图通过css加载一个图像作为背景图像。 除了标题和一个div容器外，我的HTML页面几乎是空的，我在其中加载了用JAVA和googleweb工具包构建的GUI

从互联网加载背景图像效果很好

.Bild {
    background: url("http://developer.aldebaran-robotics.com/media/img/home/nao_h25.png")
    no-repeat
    center;
}

但是现在我想从我的硬盘上加载它，最好是从项目中的文件夹中加载。 结构如下所示：

工作空间→ 项目→ 战争→ css文件

工作空间 → 项目 → 图像 → image.png

我用相对路径试过了。我不确定我是否做对了。它不起作用：

.Bild {
    background: url(/images/image.png)
    no-repeat
    center;
}

我相信你能帮助我

---

非常感谢

您需要提供图像文件相对于css文件的路径 以目录结构为例：

workspace/
 project/
   war/
      cssfile.css
   images/
      image.png 

相对于css文件的图像路径必须是

---

此处：

。

表示当前目录上方的一个目录。您可以使用

。/../

向上移动两个目录

---

要找出相对路径，您需要向上导航到公共父目录，然后向下走到媒体文件的位置。在本例中，公共父目录是向上一级的，因此

。/

就足够了，然后沿着目录结构

images/image.png

走下去，语法没有问题。所以问题一定出在路径上。 通过以斜杠

/

开始url

/images/image.png

意味着一个绝对的位置

http://some-host-name/images/image.png

---

这就是您的图像所在的位置吗？

尽量避免在CSS中以大写字母开头类和ID名称。这些在你的控制台中返回什么

window.location.domain

和

window.location.href

？控制台显示未找到“images/image.png”的文件我需要返回到结构中多远？“是什么意思？！”<代码>。表示当前目录上方的一个目录。您可以使用

。/../

转到两个目录这是整个路径：D:\Users\MyName\Documents\UNI\SWT\Praktikum\workspace\naooremotecontrol\images\im‌​age.pngD:\Users\MyName\Documents\UNI\SWT\Praktikum\workspace\naooremotecontrol\war\file.cscan您可以尝试以下操作：

background:#ffffffff url（'../images/image.png'）无重复中心顶部（带引号）完整路径如下：D:\Users\MyName\Documents\UNI\SWT\Praktikum\workspace\naooremotecontrol\images\image.pngIs\naooremotecontrol\文件夹网站的根目录？如果是这样的话，你的路径应该是可行的。如果没有，请创建一个sym链接（您在unix或linux计算机上，没有？）到您网站根目录下的images文件夹。您所说的“网站目录”是什么意思？我有一个存储我的项目（NaoRemoteControl）的工作区。这个项目包括两个文件夹：“图像”-其中图像存储和“战争”在那里的css文件。如果我理解正确，相对路径是/images/image.png，那么我会：.bild{background:url（../images/abc.png）no repeat center top；}您是否在Apache服务器上托管？然后该目录称为DocumentRoot，可以在httpd.conf文件中找到/编辑。尝试使用您的主机名（如果在dev中，通常是localhost，或者mydomain.net）和路径在浏览器中显示该映像，例如
http://localhost/images/abc.png
。如果不能，那么这就是问题的一部分——您需要确保了解文件相对于http和web的位置，而不仅仅是您的本地目录结构。。。。啊，对不起，我看到您已经使用“”成功地从web加载了图像--然后您应该能够使用“/media/img/home/nao_h25.png”引用该文件--请注意开始斜杠--无论样式表位于何处。
/images/image.png

http://some-host-name/images/image.png