css background-image 不会在 IE 或 Chrome 中显示答案

【问题标题】：css background-image won't display in IE or Chromecss background-image 不会在 IE 或 Chrome 中显示
【发布时间】：2012-03-01 12:47:37
【问题描述】：

我正在尝试使用 background-image:url('path/to/image.png');按 ID 将背景图片放置在 div 中：

#logo_block > #main_logo {
background-image: url("img/JaxonsBlack.png");
width:450px;
height:auto; }

html 是这样的：

    <div id="logo_block">
        <!-- This will remain static. -->
        <div id="main_logo">
            <!--<img id ="logo" src="img/JaxonsBlack.png" width="400" />-->
        </div>

        <!-- This div will be dynamically populated in the future
        it resides immediately under the logo image-->
        <div id="sub_title">
            <h3>sample</h3>
        </div>
    </div>

好的，所以无论我尝试什么，我都无法让它工作。

这不是路径问题。下面 html 中的 img 标签在没有被注释掉时可以正常工作。我可以将相同的 CSS 应用到 body，它也可以正常工作。
选择器。不是那些。我查看了 Chrome 的开发人员工具，并且该样式正在适当地应用于 div。我还从父 div 中删除了 div 并简单地使用 #main_logo 作为选择器，尝试了一个类等等等等。
高度。它不是高度样式。我已经看到了，不管有没有高度、宽度等，它仍然不起作用。

我似乎无法在任何地方找到有关此问题的任何信息。据我所知，我的语法是正确的，并且多个站点都支持它。这在 Chrome 或 shdder IE 中不起作用。我的 FF 安装目前（再次）损坏，所以我没有在那里尝试过。我有点怀疑它会不会有什么不同，但如果它在 Chrome 或 IE 中不起作用，我仍然需要弄清楚这一点。

我对此束手无策。这根本没有意义。

【问题讨论】：

标签： html css

【解决方案1】：

它是高度样式。 height 设置为 auto，因此它只会显示所有内容所需的高度，但其中没有内容，因此高度为 0px。

http://jsfiddle.net/Z632P/ - 将height 更改为auto，然后再改回100px。

【讨论】：

我同意乔的观点——它必须是高度。作为测试，尝试将背景颜色应用到您的#main-logo div，然后弄乱高度。
哇。所以很明显，在我整个下午的拉头发过程中，我没能达到那个组合。如果没有指定宽度和高度，它根本不起作用。我有时是个n00b。 :P 谢谢，这解决了它。
Err... 没有评论：P 但是，如果一个元素是空的（其中没有任何尺寸），它将接近 0px x 0px，所以你必须稍微强制它： )

【解决方案2】：

您的样式是否在单独的 css 文件中定义？如果是这样，则路径应该相对于 css 文件，而不是相对于 html 文件。因此，如果您在 /styles/blah.css 中有您的 css 文件，并且您有 url img/JaxonsBlack.png，它会在 /styles/img/JaxonsBlack.png 中查找它。如果是这种情况，您可以通过将其更改为 /img/JaxonsBlack.png 来修复它。正如其他人所提到的，div 不会有垂直高度，除非它有内容，或者你定义了一个。

【讨论】：

【解决方案3】：

试试：

height: 100%;

改为。

如果它在其他浏览器中工作，这应该可以修复它。

【讨论】：