CSS Firefox 中不显示背景图像
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/371337/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Background image is not displayed in Firefox
提问by user46665
An image set as the background of a DIV is displayed in IE, but not in Firefox.
设置为 DIV 背景的图像在 IE 中显示，但在 Firefox 中不显示。
CSS example:
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.)
（这个问题在很多地方都有描述，但没有看到任何结论性的解释或修复。）
回答by Ross
Sorry this got huge, but it covers two possibilities that consistently happen to me.
对不起，这变得很大，但它涵盖了我经常发生的两种可能性。
Possibility 1
可能性 1
You may find the path to the CSS file isn't correct. For example:
您可能会发现 CSS 文件的路径不正确。例如：
Say I have the following file structure:
假设我有以下文件结构：
public/
css/
global.css
images/
background.jpg
something/
index.html
index.html
On public/index.htmlthe following paths will include the CSS file:
在public/index.html以下路径上将包含 CSS 文件：
#1: <link href="./css/global.css"
#2: <link href="/css/global.css"
#3: <link href="css/global.css"
However on public/something/index.htmlnumber 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.
但是，在public/something/index.html1 号和 3 号上将失败。如果您使用的是这样的目录结构（或 MVC 结构，例如http://localhost/controller/action/params：），请使用第二个 href 类型。
Firebug's Net monitor tab will tell you if the CSS file can't be included.
Firebug 的网络监视器选项卡会告诉您是否无法包含 CSS 文件。
On the subject of paths remember that images are relative to the path of the CSS file. So:
关于路径，请记住图像是相对于 CSS 文件的路径的。所以：
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.
将鼠标悬停url()在 Firebug 的 CSS 选项卡中的背景属性部分上以检查文件是否正在加载。
Possibility 2
可能性2
It could be that the divhas 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没有内容，因此高度为 0。确保 div 中至少有一行内容（例如：lorem ipsum delors secorum）或：
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.
检查 Firebug 的布局选项卡（HTML 选项卡的）以检查 div 的高度/宽度。
回答by Eric
Strangely enough, after smashing my head on the keyboard for hours, I added display:table; to the DIV's style and the background image magically appeared in FF.
奇怪的是，在我的头在键盘上砸了几个小时后，我添加了 display:table; 以DIV的风格和背景图片神奇地出现在FF中。
回答by a avant
It looks like a background-attachment issue. It needs to be set to fixed (not scroll) to work in FF. See: http://www.w3schools.com/cssref/tryit.asp?filename=trycss_background-position
它看起来像一个背景附件问题。它需要设置为固定（不是滚动）才能在 FF 中工作。请参阅：http: //www.w3schools.com/cssref/tryit.asp?filename=trycss_background-position
回答by Hammad
Happend with me. The jpg does shows in IE but not in Firefox or Chrome. Here is the solution
发生在我身上。jpg 确实在 IE 中显示，但在 Firefox 或 Chrome 中不显示。这是解决方案
Change the following css for the element where image is displayed. It can be span, div or any other element :
为显示图像的元素更改以下 css。它可以是 span、div 或任何其他元素：
display:block
显示：块
回答by ramon22
Old post but I just Had a similar problem images not showing up in Firefox turns out it was Ad-block add-on, had to change the names of my images
旧帖子，但我只是有一个类似的问题图像未显示在 Firefox 中，结果是广告块附加组件，必须更改我的图像名称
回答by Stuart
For me, it was a matter of the file-name being case-sensitive. I'm not sure if it was CSS or if it was my Ubuntu operating system, or if it was firefox, but the way that I finally got the background images to display was by referring to BlueGrad.jpg instead of bluegrad.jpg. The former of the two is how it was saved. I didn't think it would be case sensitive, but it was.
对我来说，这是文件名区分大小写的问题。我不确定它是 CSS 还是我的 Ubuntu 操作系统，或者是 firefox，但我最终显示背景图像的方式是引用 BlueGrad.jpg 而不是 bluegrad.jpg。两者中的前者是如何保存的。我不认为它会区分大小写，但确实如此。
回答by Randall
I solved a similar problem by renaming the CSS class. MSIE allows CSS class IDs to begin with numbers; Firefox doesn't. I had created a class using the width of the image in pixels e.g. .1594px-01a
我通过重命名 CSS 类解决了类似的问题。MSIE 允许 CSS 类 ID 以数字开头；火狐没有。我创建了一个使用图像宽度（以像素为单位）的类，例如 .1594px-01a
I actually knew it was non-standard syntax but since it was working fine in MSIE I had forgotten about it. After trying all the other stuff it finally dawned on me that it could be a simple as the naming, and as soon as I put a letter in front of the class, presto!
我实际上知道它是非标准语法，但由于它在 MSIE 中运行良好，我已经忘记了它。在尝试了所有其他的东西之后，我终于意识到它可以像命名一样简单，只要我在班级面前放了一个字母，就快了！
回答by Astravagrant
Instead of using URLs relative to the page/stylesheet, a cross-browser solution is to give a relative URL starting with the application/domain root.
跨浏览器的解决方案是提供一个以应用程序/域根开始的相对 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');
FYI: As far as I'm concerned, there is no requirement to use quotes in CSS URLs, I've used them here 'cause it looks prettier.
仅供参考：就我而言，没有要求在 CSS URL 中使用引号，我在这里使用了它们，因为它看起来更漂亮。
回答by GateKiller
Make sure that the image you are referring to is relative to the css file and not the html file.
确保您引用的图像是相对于 css 文件而不是 html 文件的。
回答by Mike Geise
try this.
尝试这个。
background-color: transparent;
background-image: url("/path/to/image/file.jpg");
background-repeat: repeat;
background-position: top;
background-attachment: scroll;
