CSS 中的背景 url() 不显示图像，但 html 中的 <img src> 使其出现？答案

【问题标题】：Background url() in CSS does not display image but <img src> in html makes it appear?CSS 中的背景 url() 不显示图像，但 html 中的 <img src> 使其出现？
【发布时间】：2014-10-11 12:41:16
【问题描述】：

我有一个包含内联样式的 html 文档：这里是：

https://gist.github.com/anonymous/f80e5e22d4148f218a2d

当我尝试使用 Background url() 应用图像时，图像未显示。即使我尝试在路径的“图像”文件夹之前添加“../”，或者当我在椭圆括号内路径的开头和结尾插入“''”时。

文件夹结构如下：index.html 与另外两个文件夹'stylesheets' 和'images' 一起驻留。 'stylesheets' 文件夹中的内容是带有骨架 html5 样板的默认文件夹，它的样式表将合并到 html 文档的内联样式中。在“images”文件夹中，现在只有一个名为“logo.jpg”的文件。当我尝试通过提供“徽标”类 background:url() 将图像添加为背景时，图像不想显示在 Mozilla firefox 和其他浏览器中。但是，当我将“src”属性添加到 html 文档中的标记并指定与 CSS 样式完全相同的路径时，图像就会出现。有人可以向我解释为什么当我尝试通过 CSS 添加图像时图像没有显示吗？

【问题讨论】：

使用 Firebug for Firefox，尤其是 net 标签，查看图像是否已下载。如果不是，路径可能是错误的。请记住，在 CSS 中，相对路径是相对于 CSS 文档的，不一定是 HTML 文档。
附带说明，最好将您的代码包含在问题中，最好是复制问题所需的最低限度。
我已经这样做了。不幸的是，我在本地主机上打开 index.html，单击“net”选项卡后，它没有显示任何信息。我已经在尝试 '../' 等但没有运气
奇怪，net 标签在本地主机下一直为我工作。网络标签打开后尝试刷新页面
还是什么都没有。与默认的 Mozilla Firefox 开发者工具相同。

标签： html css image

【解决方案1】：

顺便说一句...如果它没有 src 属性，浏览器是否甚至会呈现高度和宽度？

并且不要使用img标签，如果你不使用src属性，则使用另一个标签......然后应用css背景。同样的事情

<a class="foo" target="_blank">link</a>

如果它没有 href 属性，则该元素无效，并且有时会出现奇怪的行为。

【讨论】：

但是为什么会有问题呢？我正在指定一个元素，它有一个“logo”类。该类正在应用所有其他样式，并在背景 url 属性中提供图像的来源。我希望语法是语义化的，因此我尝试使用与我希望在页面上显示的内容最相符的属性。
如果您想要语义化，那么您希望您的徽标被抓取，对吗？那你就用，不然就是另外一个有背景的元素了...
您是否在后台属性中使用了“url”而不是源？请记住，背景图像和图像源是两个不同的图像。希望对您有所帮助。

【解决方案2】：

从 CSS 链接图像的措辞与 html 文件不同。

说这是我们的文件树

    BIGFOLDER
-public
  -app.css
-images
  -targetImage.jpg
-views
  -index.html

从 index.html 链接

<img src="../images/targetImage.jpg">

你使用“../”来上一个目录，或者“././”同样的东西。

从 app.css 链接

background: url("images/targetImage.jpg");

原因是它在根目录中附加了那个 url，所以它会是 www.yoursite.com/images/targetImage.jpg

这些东西一开始会让人困惑，但随着练习它会变成第二天性:)

【讨论】：

MDN says url() 是相对于样式表，而不是网页，所以这不一定适用于给定树。