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.html1号和3号将失败.如果您使用这样的目录结构(或MVC结构,例如http://localhost/controller/action/params:),请使用第二个href类型.

Firebug的Net monitor选项卡将告诉您是否无法包含CSS文件.

关于路径的主题记住,图像是相对于CSS文件的路径.所以:

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

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

可能性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

奇怪的是,在键盘上敲了几个小时之后,我添加了显示器:table; DIV的风格和背景图像神奇地出现在FF中.

Answer 3

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

Answer 4

你可以试试这个：

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

其他声明是速记的 CSS 属性，我相信它们是不需要的。
你在网上有这个吗？我想看看我是否可以稍微摆弄一下。（本地）