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

问题描述

设置为一个DIV的背景图像在Firefox中显示在IE浏览器，但不是。

CSS示例：

  div.something {
背景：透明的url（../图像/ table_column.jpg）重复滚动0 0;
}
 

（这个问题在很多地方描述，但没有看到任何确凿的解释或修正。）

解决方案

很抱歉，这得到了巨大的，但它涵盖了两种可能性，始终发生在我身上。

可能性1

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

说我有以下文件结构：

 公共/
    CSS /
        global.css
    图片/
        background.jpg
    东西/
        的index.html
    的index.html
 

在公共/ index.html的以下路径将包括CSS文件：

 ＃1：其中，链接HREF =./ CSS / global.css
＃2：或其可链接HREF =/ CSS / global.css
＃3：其中，链接HREF =CSS / global.css
 

然而在公共/事/ index.html的 1号和3将失败。如果你正在使用这样的目录结构（或MVC结构如：的http：//本地主机/控制器/动作/ PARAMS ）使用第二个HREF类型。

Firebug的网络监控标签会告诉你，如果CSS文件不能被包括在内。

在路径的主题记住的图像是相对于CSS文件的路径。所以：

 的url（'./图像/ background.jpg'）/ *将无法正常工作* /
URL（'../图像/ background.jpg'）/ *作品：../ ==上一级* /
 

将鼠标悬停在网​​址（）在Firebug的CSS标签背景属性的一部分，以检查是否该文件的加载。

可能性2

这可能是因为在 DIV 没有任何内容，因而具有高度为0。确保div有至少一条线的东西（例如：Lorem存有德洛尔secorum）或：

  div.something {
    显示：块; / *进行验证* /
    最小高度：50像素;
    最小宽度：50像素;
}
 

检查Firebug的布局选项卡（在HTML标签）来检查div有一个高度/宽度。

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

CSS example:

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.

Possibility 1

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

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"

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's Net monitor tab will tell you if the CSS file can't be included.

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 */

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

Possibility 2

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;
}

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

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