背景图像未渲染答案

【问题标题】：Background-Image Not Rendering背景图像未渲染
【发布时间】：2012-11-02 03:06:35
【问题描述】：

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

HTML

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

CSS

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

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

【问题讨论】：

标签： html css

【解决方案1】：

嗨，现在至少定义您的div 中的min-height，因为默认情况下您r div id width 是100% 和height is 0，而不是至少定义您的div 中的min-height

像这样

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

【讨论】：

【解决方案2】：

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

【讨论】：

【解决方案3】：

一个链接会很有帮助。

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

喜欢：

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

【讨论】：

【解决方案4】：

去掉单引号

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

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

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

【讨论】：