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

A<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）....

技巧部分是针对视频的...您必须在 src url 的末尾添加 ... ?wmode=transparent ... ...

<!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 回答