背景图像路径在Firefox中不起作用

Posted 2023-03-06

【中文标题】背景图像路径在Firefox中不起作用

【英文标题】：Background image path not working in firefox

【发布时间】：2012-11-05 14:05:09

【问题描述】：

我在 Firefox 中加载 <li> 的背景图像时遇到问题。

我原来的代码是：

background: #bdcad7 url(../images/navbg.png) repeat-x;

在 chrome 和 IE 中运行良好，但在 FF 中不行。

background: #bdcad7 url(images/navbg.png) repeat-x; 

也适用于 IE 和 chrome，但不适用于 FF

让它在 FF 中工作的唯一方法是如果我包含下一个目录级别

background: #bdcad7 url(/includes/images/navbg.png) repeat-x; 

但这在其他浏览器中不起作用。

我尝试了所有我能想到的./、../，包括引号、双引号、使用background-image 等，但无法让它在所有浏览器中工作。相对路径似乎在 FF 中读取不同（这是我以前从未见过的）

在所有浏览器中有效的是具有图像的完整 url 或绝对路径，但每个在文本编辑器上占用 3 行，所以我想尽可能避免它。

任何关于为什么 Firefox 让我遇到困难的见解都将不胜感激。

【问题讨论】：

显示css和images目录的目录结构。路径是相对于 CSS 文件的，而不是 html 文件 ***.com/questions/940451/…

如何加载样式表？它会在任何时候被重定向吗？

【参考方案1】：

感谢大家的意见。 尽我所能，我认为这是沿着目录路径出现在服务器端某处的问题。

我已经对 css 进行了两次和三次检查，尝试了所有可能的变体，并且无法在测试文档中复制错误。

我认为唯一的选择是使用完整的绝对路径，以防其他人遇到同样的问题。

background:#F1F1F4 url(/dir1/dir2/dir3/dir4/includes/style/images/background.png) top left repeat-x;

【参考方案2】：

正确的语法应该是

background: #bdcad7 url(../images/navbg.png) repeat-x right top

因此，您可能必须添加最后 2 个参数才能使其正常工作。 如果您向我们提供网站结构，将会有很大帮助。

【讨论】：

背景位置也没有帮助。通过firebig图像不会加载。我以前从未遇到过相对路径的这个问题，我只是很难过。这是一个内部应用程序，很遗憾我无法分享链接。

链接和网站结构是两个不同的东西。

【参考方案3】：

确保包含背景的 div 具有一定的高度。另外，请确保图像文件名是相对于 CSS 文件的路径。

更多可能的解决方案可以在这里找到 - Background image is not displayed in Firefox

【讨论】：

背景位置也没有帮助。通过firebig图像不会加载。我以前从未遇到过相对路径的这个问题，我只是很难过。这是一个内部应用程序，不幸的是我无法共享链接，但结构非常基本。这是一个独立的应用程序，只有 link 1 link 1

class"menu" 缺少一个 = 如果是这种情况，<li> 元素描述的是列表元素，而不是链接。

【参考方案4】：

试试url('../images/navbg.png') 和' '。无论如何我都会这样做，而且它似乎并不疼，所以也许它会有所帮助？值得一试。

【讨论】：

“我已经尝试了所有我能想到的变体 (...) 包括引号、双引号 (...)”

【参考方案5】：

背景: url("../images/navbg.png") 重复-x 向右滚动#BDCAD7;