Firefox 中不显示背景图像 [英] Background image is not displayed in Firefox

问题描述

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

An image set as the background of a DIV is displayed in IE, but not in Firefox.

CSS 示例:

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

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

(The issue is described in many places but haven't seen any conclusive explanation or fix.)

推荐答案

对不起，这有点大，但它涵盖了我一直发生的两种可能性.

Sorry this got huge, but it covers two possibilities that consistently happen to me.

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

You may find the path to the CSS file isn't correct. For example:

假设我有以下文件结构:

Say I have the following file structure:

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

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

On public/index.html the following paths will include the CSS file:

#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 类型.

However on public/something/index.html number 1 and 3 will fail. If you are using a directory structure like this (or an MVC structure e.g.: http://localhost/controller/action/params) use the second href type.

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

Firebug's Net monitor tab will tell you if the CSS file can't be included.

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

On the subject of paths remember that images are relative to the path of the CSS file. So:

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

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

Hover over the url() part of the background attribute in Firebug's CSS tab to check if the file's being loaded.

可能是 div 没有内容，因此高度为 0.确保 div 中至少有一行内容(例如:lorem ipsum delors secorum)或:

It could be that the div has no content and thus has a 0 height. Make sure the div has at least a line of something in (e.g.: lorem ipsum delors secorum) or:

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

检查 Firebug 的布局选项卡(HTML 选项卡)以检查 div 的高度/宽度.

Check Firebug's layout tab (of the HTML tab) to check the div has a height/width.

这篇关于Firefox 中不显示背景图像的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！