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のインラインスタイリングで幅と高さの代わりに線の高さと線の幅を使用しています...

于 2012-07-12T13:44:37.127 に答える
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 に答える
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 に答える