Question

我正在将图像放入具有背景图像的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>

Answer 1

<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;">

Answer 2

您在div的内联样式中使用行高和行宽而不是宽度和高度...

Answer 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>

Answer 4

您需要做的就是将“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/

Answer 5

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

但是，如果您为div明确设置维度，那么您可以让img绝对定位（尽管设置position: relative可能会更好，更强大div，以便img“绝对定位”将相对于div）。要进行尺寸标注，请使用height和width属性。

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

Div的背景图像没出现

5 个答案: