【问题标题】:Background image not found from my css file从我的 css 文件中找不到背景图像
【发布时间】:2015-04-20 18:38:15
【问题描述】:

我的 css 文件位置 htdoc/anyFolder/css/style.css 和图像文件夹文件位置 htdoc/anyFolder/图像/search.png。我在 css 文件中使用了 background-image 规则,例如 background-image: url("/image/search.png"); 但我没有找到图像。浏览器寻找http://localhost/image/search.png,而它应该寻找http://localhost/anyFolder/image/search.png。哪里有问题。我试过了

background-image: url("../image/search.png");

background-image: url("/../image/search.png");

background-image: url("./../image/search.png");

这些都不起作用。找不到问题出在哪里。是否取决于包含 css 文件的位置。

【问题讨论】:

  • 改成background-image: url("/anyFolder/image/search.png);
  • anyFolder/image/search.png 和 /anyFolder/image/search.png 不起作用。有什么好办法让它不依赖于那个anyFolder名称
  • none of this work - 你为什么这么认为?在您的最后 3 个选项中,您能告诉我们浏览器在哪里看起来像您在第一个选项中所说的那样吗?

标签: css


【解决方案1】:

如果你的路径是 htdoc/anyFolder/css/style.csshtdoc/anyFolder/image/search.png

这应该可行:

background-image: url("../image/search.png");

这也应该有效:

background-image: url("/anyFolder/image/search.png");

但你说他们没有。您应该检查文件和文件夹的名称是否正确,以及 HTML 上是否有 base 元素,因为它可能会更改浏览器查找文件的路径。

【讨论】:

  • 如果您更改了路径并且浏览器仍然在同一路径中查找,则可能是缓存问题。尝试清理缓存。
  • “HTML 上的基本元素”是什么意思?无法得到它:(
  • The HTML Base Element (<base>) specifies the base URL to use for all relative URLs contained within a document. 在这里阅读更多信息 developer.mozilla.org/en/docs/Web/HTML/Element/base 但是如果你不知道它是什么,你可能不会使用它,所以它应该不是问题。
  • 这是缓存问题。很抱歉打扰你们:(
  • 链接标签href中的相对路径不像我使用“../../css/style.css”时那样工作。 404 但是当我使用“/anyFolder/css/style.css”它的作品。 php 文件路径是 htdoc\anyFolder\view\layout\main.php。你能解释一下为什么。它不是缓存问题。提前致谢
【解决方案2】:

是否取决于包含 css 文件的位置。

是的。图片的路径与您的 css 文件所在的位置相关。

只需使用:

background-image: url("../anyFolder/image/search.png");

【讨论】:

  • 对不起,它不起作用我的问题是它取决于 css 文件包含在哪里??
  • 是的。图像的路径与您的 css 文件所在的位置相关。如果您的路径以“../”开头,则您使用的是相对路径。如果您的路径以“/”开头,则您使用的是绝对路径。
  • 怎么样:background-image: url("../../anyFolder/image/search.png");
  • 试过不行。 css 文件包含在 htdoc\anyFolder\view\layout\main.php 文件中。重要吗??
  • 这应该不重要。重要的是css文件在哪里。
【解决方案3】:

尝试将html和css文件放在同一个文件夹中

【讨论】:

  • 欢迎来到 StackOverflow。请说明您的解决方案是如何解决问题的。
【解决方案4】:

也许晚了,但解决办法是:

      bacgkround-image: url(../search.png)

不需要 "anyFolder","image"....

【讨论】:

    猜你喜欢
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 2012-02-05
    • 2012-02-14
    • 2018-08-06
    • 1970-01-01
    • 1970-01-01
    相关资源
    最近更新 更多