Firefox 中不显示背景图像

Question

设置为 DIV 背景的图像在 IE 中显示，但在 Firefox 中不显示。

CSS 示例：

div.something {
background:transparent url(../images/table_column.jpg) repeat scroll 0 0;
}

（这个问题在很多地方都有描述，但没有看到任何结论性的解释或修复。）

Answer 1

对不起，这变得很大，但它涵盖了我经常发生的两种可能性。

可能性 1

您可能会发现 CSS 文件的路径不正确。 例如：

假设我有以下文件结构：

public/
    css/
        global.css
    images/
        background.jpg
    something/
        index.html
    index.html

在public/index.html ，以下路径将包含 CSS 文件：

#1:  <link href="./css/global.css"
#2:  <link href="/css/global.css"
#3:  <link href="css/global.css"

但是在public/something/index.html 1 号和 3 号会失败。 如果您使用的是这样的目录结构（或 MVC 结构，例如： http://localhost/controller/action/params ），请使用第二个 href 类型。

Firebug 的网络监视器选项卡会告诉您是否无法包含 CSS 文件。

关于路径，请记住图像是相对于 CSS 文件的路径的。 所以：

url('./images/background.jpg') /* won't work */
url('../images/background.jpg') /* works: ../ == up one level */

将鼠标悬停在 Firebug 的 CSS 选项卡中背景属性的url()部分上，以检查文件是否正在加载。

可能性2

可能是div没有内容，因此高度为 0。 确保 div 中至少有一行内容（例如：lorem ipsum delors secorum）或：

div.something {
    display: block; /* for verification */
    min-height: 50px;
    min-width: 50px;
}

检查 Firebug 的布局选项卡（HTML 选项卡的）以检查 div 的高度/宽度。

Answer 2

奇怪的是，在我的头在键盘上砸了几个小时后，我添加了 display:table; 以DIV的风格和背景图片神奇地出现在FF中。

Answer 3

它看起来像一个背景附件问题。 它需要设置为固定（不是滚动）才能在 FF 中工作。 请参阅： http : //www.w3schools.com/cssref/tryit.asp?filename=trycss_background-position

Answer 4

旧帖子，但我只是有一个类似的问题图像未显示在 Firefox 中，结果是广告块附加组件，必须更改我的图像名称

Answer 5

发生在我身上。 jpg 确实在 IE 中显示，但在 Firefox 或 Chrome 中不显示。 这是解决方案

为显示图像的元素更改以下 css。 它可以是 span、div 或任何其他元素：

显示：块

Answer 6

对我来说，这是文件名区分大小写的问题。 我不确定它是 CSS 还是我的 Ubuntu 操作系统，或者是 firefox，但我最终显示背景图像的方式是引用 BlueGrad.jpg 而不是 bluegrad.jpg。 两者中的前者是如何保存的。 我不认为它会区分大小写，但确实如此。

Answer 7

跨浏览器的解决方案是提供一个以应用程序/域根开始的相对 URL，而不是使用相对于页面/样式表的 URL。

/* Relative to Stylesheet (Works in Firefox) */
background: url('../images/logo.gif');
/* Relative to Page (Works in IE, Chrome etc.) */
background: url('images/logo.gif');
/* Absolute path (Fine, unless you change domains)*/
background: url('http://www.webby.com/myproduct/images/factsheet.gif');
/* Domain Root-relative path (Works in Firefox, IE, Chrome and Opera) */
background: url('/myproduct/images/factsheet.gif');

仅供参考：就我而言，不需要在 CSS URL 中使用引号，我在这里使用了它们，因为它看起来更漂亮。

Answer 8

尝试将图像名称放在引号中，例如：

background-image: url('image.jpg');

Answer 9

确保您引用的图像是相对于 css 文件而不是 html 文件的。

Answer 10

试试这个。

background-color: transparent;
background-image: url("/path/to/image/file.jpg");
background-repeat: repeat;
background-position: top;
background-attachment: scroll;

Answer 11

我有过类似的问题。 原因是 firefox 对 css 中缺少的字段很敏感。 Chrome 会（有时）自动完成缺失的字段，因此该问题会出现在您的 Firefox 浏览器上。

您需要添加一个显示类型，因为现在它被转换为 0 高度。

就我而言：

.left-bg-image {
    display: block; // add this line

    background-image: url('../images/profile.jpeg');
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center center;
    opacity: .6;
    min-width: 100%;
    min-height: 100vh;
}

Answer 12

我通过重命名 CSS 类解决了类似的问题。 MSIE 允许 CSS 类 ID 以数字开头； 火狐没有。 我创建了一个使用图像宽度（以像素为单位）的类，例如 .1594px-01a

我实际上知道它是非标准语法，但由于它在 MSIE 中运行良好，我已经忘记了它。 在尝试了所有其他的东西之后，我终于意识到它可以像命名一样简单，只要我在班级面前放了一个字母，就快了！

Answer 13

我发现了导致此问题的两件事：

1. 我正在使用 Firefox 似乎不喜欢的 .tif 文件 - 我更改为 .png 文件。
2. 我添加了overflow:auto; 到 div 的 CSS - display:block; 对我不起作用。

Answer 14

我的错误是使用“\\”而不是“/”。 在 IE 中工作正常，但在其他浏览器中无效。

Answer 15

我在 FF 中的 CSS background-image 属性方面遇到了类似的问题。 它在 IE 中运行良好，但拒绝在 FF 中工作；) 在阅读了一些帖子后，我确定问题确实是 div 中除了表格之外没有任何内容（我试图让背景图像调整到大小没有折叠或扩展，因此在 div 的背景中使用了更大的图像以形成各种“裁剪”。）对我来说，解决方案似乎只是通过放置一个 img 标签来简单地“欺骗”显示了一个空白的 .png 文件，然后我将其重新调整为正确的图像高度，宽度设置为 100%。 这对我的问题有效，我希望它可以帮助遇到类似问题的其他人。 可能不是最好的修复，但它是一个修复 ;)

Answer 16

除了已经说过的之外，我唯一能想到的就是这幅画的创作方式。 如果您在 Photoshop 中制作/编辑了图像，请确保将其另存为“另存为 Web...

有时，如果您在 Photoshop 中使用 JPG 图像而不另存为 Web 图像，则它可能不会出现在 Firefox 中。 几周前我遇到过这种情况，一位图形艺术家为一个迷你网站创建了一个漂亮的标题，但它不会出现在 FF 中！

等等...

尝试在 div 上设置宽度和高度以展开它。 这可能是您的 div 中的无内容问题。

Answer 17

它可能看起来很奇怪，但这对我有用>

#hwrap {
background-color: #d5b75a;
background: url("..//design/bg_header_daddy.png"), url("..//design/nasty_fabric.png");
background-position: 50% 50%, top left;
background-origin: border-box, border-box;
background-repeat: no-repeat, repeat;
}

是的，双点和双斜线... ??!!?? ...我在互联网上找不到任何报告这种奇怪行为的内容。

[编辑] 我已经单独发表了一篇文章 > https://stackoverflow.com/q/18342019/529802

Answer 18

（这些似乎不是 OP 的确切情况，但问题有些相关，我找到了我想分享的解决方法）

我也遇到过同样的问题——除了 Firefox 之外，背景图片随处可见——对我来说，这个问题与我正在开发一个浏览器插件有关。

我正在使用contentStyleFile属性在pageMod模块中注入文件style.css 。 其中，有规则background-image: url(/img/editlist.png); 我在其中引用附加组件外部的图像文件。 这里的问题是，与其他浏览器不同，Firefox 将这个外部域根错误解释为附加组件的内部根！

css 文件是 Chrome 版本的扩展/附加组件的 1:1 端口，所以我不想弄乱它。 这就是为什么我在我的资源文件夹中添加了一个额外的contentStyle规则以及该图像的副本。 此规则只是覆盖了 css 文件中的规则。

（事后看来，甚至可能是一种比以前更优雅的方法……）

Answer 19

你可以试试这个：

div.something {
background: transparent url(../images/table_column.jpg);
}

其他声明是速记 CSS 属性，我认为它们不是必需的。
你在网上有这个吗？ 我想看看我能不能稍微摆弄一下。 (本地)

Answer 20

恐怕问题多于答案，但它们可能会帮助您找到正确的答案：

您是否有可能以某种方式（使用一些浮动或类似方式）折叠 Firefox 中的 div？

div 中是否还有其他内容以确保它足够大以显示图像？

您是否安装了Firebug并查看了页面上的 CSS 定义？

Answer 21

您确定图片是 JPG 文件而不是 PNG/其他文件吗？

我想知道 IE 是否让您摆脱其他浏览器所没有的东西。

同样，文件案例是否完全符合规定？

Answer 22

有这样一个 HTML 'base' 标签

<head>
   <base href="http://example.com/some/bizarre/directory"/>
</head>

如果这存在于您的页面中，则该 url 的图像与您当前的 url 无关，而是与给定的基本 url 相关。 不过，我不知道为什么 IE 显示它而 Firefox 不显示。

Webdeveloper Firefox 扩展提供了“显示损坏的图像”选项——这可能会派上用场。 此外，您可以尝试“ Live Http Headers ”来查看是否/什么图像被请求以及返回码是什么。

Answer 23

没有人提到背景起源，所以你去：

background-image:url('dead.beef');
background-size: 100% 100%;
background-origin:border-box;

为我解决了问题； 我的背景显然在我的 div 之外。

Answer 24

对于那些在 FF 中遇到问题但在 Chrome 中没有的人：

您可能会错误地在职位的不同值类型之间混用。

例如，

background: transparent url("/my/image.png") right 60%  no-repeat;

会犯这个错误。 修复方法可能是：

background: transparent url("/my/image.png") 100% 60%  no-repeat;

Answer 25

在我的情况下，它是由 FF 隐私和安全设置中的“严格”模式引起的。 在我更改为“标准”后，所有背景图像都变得可见。

Answer 26

这对我有用：

1) 单击背景图像表。
2) 右键单击​​页面底部的状态栏。
3) 单击内联样式。
4) 单击背景样式选项卡。
5) 如果您在颜色标题中看到“透明”，那就是问题所在。
6) 单击颜色框并选择一种颜色（白色是不错的选择。）
7) 颜色标题现在应该显示为白色。
8) 单击确定。
9) 保存页面。
10) 上传页面并覆盖现有文件。
11) 刷新页面，您的背景图片将显示。

注意：请确保您已上传您的背景图片 jpeg。 我忘记上传背景 jpeg 一次，并花了很长时间试图对其进行排序，然后才意识到我的错误。

问候

马丁