1

我将图像放在一个也有背景图像的 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>
4

5 回答 5

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

于 2012-07-12T13:44:01.363 回答
1

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

于 2012-07-12T13:44:37.127 回答
0

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

于 2012-07-12T14:15:59.067 回答
0

代码有几个问题，但阻止背景显示的问题是position: absolute. 这样，img元素就从文档的正常流程中取出，在div.

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

top:200; left:350符合标准的浏览器会忽略这些设置。改为使用top:200px; left:350px。

于 2012-07-12T14:25:25.307 回答
0

您必须为外部 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>
于 2012-07-12T13:47:18.470 回答