CSS中的背景url（）不显示图像，但在html中使用<img src>会使其显示？

我有一个html文件，在它的内嵌样式：这里是：CSS中的背景url（）不显示图像，但在html中使用<img src>会使其显示？

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

当我尝试使用背景网址（），则图像不显示应用图像。即使我尝试在路径的“图像”文件夹之前添加“../”，或者在椭圆括号内的路径的开始和结尾插入“”“”。

该文件夹结构如下：index.html驻留在两个其他文件夹的“样式表”和“图像”中。 “样式表”文件夹中的内容是默认文件夹，附带骨架html5样板，样式表将合并到html文档的内联样式中。在'images'文件夹里面，只有一个文件，现在叫'logo.jpg'。当我尝试通过给出'logo'类背景添加图像作为背景：url（），那么图像不希望显示在Mozilla Firefox和其他浏览器中。但是，当我在html文档中添加'src'属性以标记标签并指定路径与CSS样式中的路径完全相同时，图像就会出现。有人可以向我解释为什么当我试图通过CSS添加图片时图片不显示？

来源

2014-10-11 Danny_Student

使用Firebug for Firefox（特别是网络标签）查看图像是否已下载。如果不是，路径可能是错误的。请记住在CSS中，相对路径是相对于CSS文档而言的，不一定是HTML文档。 – 2014-10-11 12:55:11

在附注上，最好在代码中包含代码，最好是复制问题所需的最小代码。 – 2014-10-11 12:56:34

我已经这么做了。不幸的是，我打开本地主机上的index.html，并点击“网络”选项卡，它不显示任何信息。我已经尝试'../'等，但没有运气 – 2014-10-11 12:56:55

通过他们的方式...如果它没有src属性，浏览器甚至会渲染高度和宽度吗？

不要使用img标签，而要使用另一个标签（如果您不使用src属性），然后应用css背景。像

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

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

来源

2014-10-11 13:14:47 poashoas

但是为什么它会是一个问题？我指定了一个元素，它具有一个“徽标”类。该类正在应用所有其他样式，并在后台url属性中提供图像的来源。我希望语法是语义的，因此我试图使用最适合我想要在页面上显示的属性。 – 2014-10-11 13:31:03

如果您想要语义，那么您希望您的徽标能够被正确抓取？那么你只需使用，否则它只是另一个背景元素... – poashoas 2014-10-11 13:46:19

好吧，我明白了。 – 2014-10-11 14:00:04

从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

这东西开始时会感到困惑，但实际上它变成了第二性质:)

来源

2017-05-13 02:05:08

[MDN says]（https://developer.mozilla.org/en-US/docs/Web/CSS/url#The_url%28%29_functional_notation）'url（）'是相对于样式表，而不是网页，所以这不一定像给定的树所述的那样工作。 – 2017-05-13 02:29:42

CSS中的背景url（）不显示图像，但在html中使用<img src>会使其显示？

回答

相关问题