div的背景图片没有出现答案

【问题标题】：Background image of Div not appearingdiv的背景图片没有出现
【发布时间】：2012-07-12 06:39:01
【问题描述】：

我将一个图像放在一个也有背景图像的 div 中。但是只有图片本身出现，没有出现父div的背景图片。

我的代码：

  <div id="proceedbody" style="background: url(http://www.asifsinan.com/wp-content/uploads/2012/07/please-proceed-image.jpg); background-repeat: no-repeat; line-width:810px; line-height: 718px;"><img id="proceed" style="position: absolute; top:200; left:350;" src="http://www.asifsinan.com/wp-content/uploads/2012/07/please-proceed-matter.png"></div>

【问题讨论】：

还需要父 div 代码。
从技术上讲，应该没有父 div b/cproceedbody 是一个 id

标签： css html background-image image

【解决方案1】：

代码有几个问题，但阻止背景显示的问题是position: absolute。这样一来，img 元素就从文档的正常流程中取出，div 内部没有任何内容，因此它的高度将为零。

但是，如果您为div 明确设置尺寸，那么您可以将img 绝对定位（尽管在div 上设置position: relative 可能会更好、更健壮，这样img“绝对定位”将相对于div)。对于尺寸标注，请使用 height 和 width 属性。

设置top:200; left:350 会被符合标准的浏览器忽略。请改用top:200px; left:350px。

【讨论】：

【解决方案2】：

您需要做的就是将“line-width”和“line-height”更改为“height”和“width”，并将：background-size:100% 100%; 添加到#proceedbody

<div id="proceedbody" style="background: url(http://www.asifsinan.com/wp-content/uploads/2012/07/please-proceed-image.jpg); background-repeat: no-repeat; width:810px; height: 718px; background-size:100% 100%;"><img id="proceed" style="position: absolute; top:200; left:350;" src="http://www.asifsinan.com/wp-content/uploads/2012/07/please-proceed-matter.png"></div>

jsFiddle 链接：http://jsfiddle.net/justinc535/cSrQL/

【讨论】：

【解决方案3】：

您必须为外部 div 设置高度（和宽度），否则它将仅与图像一样高。因为 img-tag 中的图像在其边框中是半透明的，并且 web 不能显示半透明，所以整个外部 div 都被图像覆盖。

编辑：将您的内部图像设置为背景-图像到内部 div 可能是更好的方法：

#proceedbody{
  background: url(http://www.asifsinan.com/wp-content/uploads/2012/07/please-proceed-image.jpg);
  height: 810px;
}

#inside{
  background: url(http://www.asifsinan.com/wp-content/uploads/2012/07/please-proceed-matter.png) no-repeat left top transparent;
  height: 276px;
}

    <div id="proceedbody">
    <div id="inside"></div>
    </div>

【讨论】：

【解决方案4】：

您在 div 的内联样式中使用 line-height 和 line-width 而不是 width 和 height...

【讨论】：

【解决方案5】：

<div id="proceedbody" style="width:810px; height:718px; background: url(http://www.asifsinan.com/wp-content/uploads/2012/07/please-proceed-image.jpg) no-repeat 0 0;">

【讨论】：