Question

我正在尝试使用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应用到正文中，它也可以正常工作。
选择器。不是那些。我看一下Chrome的开发人员工具，风格正在适当地应用于div。我还从父div中删除了div，并简单地使用#main_logo作为选择器，尝试了类等等。
高度。它不是高度风格。我已经看过上面提到过的，有或没有高度，宽度等，它仍然不起作用。

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

我在这方面已经结束了。这根本没有意义。

Answer 1

高度样式。 height设置为auto，因此它只会显示所有内容所需的高度，但其中没有任何内容，因此＆＃39} ; s 0px tall。

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

Answer 2

尝试：

height: 100%;

代替。

如果它在其他浏览器中运行，则应该修复它。

Answer 3

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

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

3 个答案: