0

画像の上にdivを配置したい。今のところ、画像の左上に向けたいと思います。これは、さまざまな画面サイズのビューと互換性がある必要があるため、絶対配置の div は機能しないと思います...どうすればよいですか? 助けてください。

4

3 に答える 3

1

画像を div の背景として配置し、最初の div に別の div を挿入できます。このようなもの：

<div style="background: url('myimg.png'); width: '100px'; height: '100px' float: left;">
   <div style="float: left;">TEST</div>
</div>

テストは画像の左上に表示されます。

于 2013-03-10T15:37:22.520 に答える
0

は<div>すでに親要素の左上から始まっています。これはブロック レベルの要素であるため、幅を指定する必要があります。そうしないと、使用可能なすべてのスペースが占有されます。

作業例: http://jsfiddle.net/pd39B/

<div></div>
<img src="https://twimg0-a.akamaihd.net/profile_images/2642324404/46d743534606515238a9a12cfb4b264a.jpeg">

div {
    height: 50px;
    width: 50px;
    background-color: blue;
}
于 2013-03-10T15:35:31.503 に答える
0

これは少しトリッキーです...

iframe/ビデオの上に div を配置しています...

（iframeを画像に置き換えるだけです）....

トリック部分はビデオ用です... 追加する必要があります... ?wmode=transparent ... src URLの最後に...

<!DOCTYPE HTML > 
<style type="text/css"> 
.Container {position:relative;  float:left;  border: 1px solid #0f0; }
.Vid {position:absolute; top:7px; left:7px; width:90%; height:90%;  }
.Lyr {position:absolute; top:7px; left:7px; width:90%; height:90%; background-color: #a3E1a6;  opacity:0.5; }
</style>

<div id="Cntr0" class="Container" style="width:220px; height:140px;">
    <iframe id="frm0" class="Vid" src='http://www.youtube.com/embed/y1VVXrUdO2s?wmode=transparent' frameborder='0'></iframe>
    <div id="div0" class="Lyr" ></div>
</div>
于 2013-03-10T15:52:51.337 に答える