【问题标题】:Div background-image not appearing? Image source has been checked multiple timesdiv背景图像没有出现?图片来源已检查多次
【发布时间】:2013-04-25 02:40:33
【问题描述】:

我正在尝试设置一个简单的 div,过去我已经做过很多次了,但是出了点问题……这是我的代码。

http://jsfiddle.net/psychoticpanda/HTtRs/

要么我发疯了,在某事上遇到了小故障,要么我在一天 13 小时的课后编写代码为时已晚......请帮助我保持清醒并帮助我!该图像在用作<img src="(IMAGE)" /> 时有效,但是当我在CSS 中将其用作background-image: url("image"); 时它不起作用...?我需要它作为按钮在上面没有问题的背景!请帮忙...

【问题讨论】:

  • 你确定css文件所在位置的相对路径与img元素中的相对路径相同吗?

标签: css image url html background


【解决方案1】:

如果url() 内容是相对路径,则它派生自样式表位置的路径。因此,如果您的样式表是/css/file.css 并且规则是url(image/filename.png),它将在/css/image/filename.png 中查找它。您可能应该为图像使用绝对路径。

【讨论】:

  • 真的..?想知道我以前从未遇到过这种情况,但我最近才开始编写代码,所以这只是我的第三个项目。我将如何使用绝对路径?我目前将我的文件夹设置为... css、图像、js,然后将主 map.html 包含在一个通用文件夹中。
  • @psychoticpanda 绝对路径以斜杠开头(或者是完全限定的 url,例如 http://example.com/
  • 嗯,我认为这并不是 100% 确定的,那么我将如何在不将图像托管在服务器上并暂时在本地对其进行测试的情况下进行绝对路径呢?
  • @psychoticpanda 在我的示例中您可能错过了“或”,但url(/path/to/images/from/document/root/image.png) 是绝对路径
  • 绝对路径是http://example.com/images/map.png。但鉴于您的文件结构,您也可以将相对路径更改为url("../images/map.png")。两个../的意思是“上一个文件夹”。
【解决方案2】:

url("images/map.png") 的文件路径假定您的 images 文件夹与 CSS 文件位于同一文件夹中。如果不是这种情况,则说明您的路径不正确。如果是,接下来我会尝试(但无论如何都要考虑)是使用background: 而不是background-image:——它本身不提供任何信息关于它的位置或是否要重复图像。

【讨论】:

    猜你喜欢
    • 2012-07-12
    • 1970-01-01
    • 1970-01-01
    • 2012-03-01
    • 2014-03-25
    • 2020-10-25
    • 1970-01-01
    • 2017-01-31
    • 2018-02-22
    相关资源
    最近更新 更多