html - 背景图像未渲染

Question

我有一个背景图像正在加载到浏览器中，但它没有在页面上呈现。这是代码：

HTML

<body>
  <div id="mainContainer">
  </div>
</body>

CSS

#mainContainer
{
   background-image:url('bckgrdImg.png');
}

而已。我只需要渲染图像。同样，当我在 Chrome 中检查页面时，我看到图像正在加载到浏览器中，但它不在网页上。有什么想法吗？谢谢。

score 2 · Accepted Answer

2

尝试给你的 div 一些宽度和高度。这是因为如果你看它，div 的高度为 0。

于 2012-11-02T03:08:08.017 回答

score 2 · Accepted Answer

嗨，现在至少定义min-height你的，div 因为你r div id width是默认的100%，而height is 0不是至少定义min-height你的div

像这样

#mainContainer
{
   background-image:url('bckgrdImg.png');
   min-height:200px;  // height define according your design or background images
}

score 2 · Accepted Answer

一个链接会很有帮助。

但请先尝试在#mainContainer 上设置宽度和高度。

喜欢：

#mainContainer
{
    width: 100%;
    height: 100%;
   background-image:url('bckgrdImg.png');
}

score -1 · Accepted Answer

删除单引号

#mainContainer
{
   background-image:url(bckgrdImg.png);
}

您可能需要为此 div 定义维度。当 div 中没有任何内容，没有宽度和高度 css 时，div 将显示为不可见，因为它是 0px x 0px :)

#mainContainer
{
   background-image:url(bckgrdImg.png);
   height:100%;
   width:100%
}

4 回答 4