来自硬盘的 css 图像答案

【问题标题】：css image from hard disk来自硬盘的 css 图像
【发布时间】：2013-04-01 14:02:25
【问题描述】：

我即将构建一个 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;
}

我相信你可以帮助我！

非常感谢

【问题讨论】：

尽量避免在 CSS 中以大写字母开头类名和 ID 名。这些在您的控制台中返回什么； window.location.domain 和 window.location.href?
控制台显示“images/image.png”文件未找到

标签： css image load workspace

【解决方案1】：

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

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

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

../images/image.png

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

这里：.. 表示当前目录之上的一个目录。您可以使用../../ 向上移动两个目录。

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

【讨论】：

我需要在结构中返回多远？ “..”是什么意思..？！
.. 表示当前目录的上一级目录。您可以使用../../ 向上移动两个目录
这是整个路径：D:\Users\MyName\Documents\UNI\SWT\Praktikum\workspace\NaoRemoteControl\images\im‌age.png
D:\Users\MyName\Documents\UNI\SWT\Praktikum\workspace\NaoRemoteControl\war\file.css
你可以试试这个：background: #ffffff url('../images/image.png') no-repeat center top;（带引号）

【解决方案2】：

语法没有错。所以问题一定出在路径上。通过以斜杠/ 开头的网址，

/images/image.png

表示绝对位置

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

那是你的形象吗？

【讨论】：

完整路径是这样的：D:\Users\MyName\Documents\UNI\SWT\Praktikum\workspace\NaoRemoteControl\images\image.png
\NaoRemoteControl\ 文件夹是网站的根目录吗？如果是这样，您的路径应该有效。如果没有，请创建一个符号链接（您在 unix 或 linux 机器上，不是吗？）到您的图像文件夹，就在您网站的根目录是的任何目录中。
“网站目录”是什么意思？我有一个存储我的项目（NaoRemoteControl）的工作区。该项目包括 2 个文件夹：“images”-存储图像的位置以及 css fil 所在的“war”。如果我理解正确，相对路径是 /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 的位置，而不仅仅是你的本地目录结构。
...啊，对不起，我看到你已经使用“developer.aldebaran-robotics.com/media/img/home/nao_h25.png”成功地从网上加载了图像——那么你应该可以参考带有“/media/img/home/nao_h25.png”的文件——注意开始的斜线——不管你的样式表在哪里。