来自硬盘的 css 图像

Question

我即将构建一个 GUI，我正在尝试通过 css 加载图像作为背景图像。 我的 HTML 工作表几乎是空的，除了标题和一个 div 容器，我在其中加载了 GUI，它是用 JAVA 和 Google Web Toolkit 构建的。

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

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

但现在我想从我的硬盘加载它，最好是从元素中的文件夹加载。 结构如下所示:

工作区→元素→war→css文件

工作区 → 元素 → 图片 → 图片.png

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

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

我相信你能帮到我!

非常感谢

Answer 1

你需要提供图片文件相对于css文件的路径 让我们以您的目录结构为例:

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

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

../images/image.png

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

此处:..表示当前目录上一级目录。您可以使用 ../../ 向上移动两个目录。

要找出相对路径，您需要向上导航到公共(public)父目录，然后向下走到媒体文件的位置。在这种情况下，公共(public)父目录在上一级，因此 ../ 就足够了，然后向下遍历目录结构 images/image.png。