Question

我想在图像上放置一个div。截至目前，我想我希望它朝向图像的左上角。这需要与不同屏幕尺寸的视图兼容，所以我不认为绝对定位的div会起作用......我怎么能这样做？请帮忙。

Answer 1

您可以将图像作为div的背景，并在第一个div中插入另一个div。像这样：

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

测试将出现在图像的左上方。

Answer 2

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

Answer 3

这有点棘手......

将div放在iframe /视频上......

（只需用你的图片替换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>

在图像上放置div

3 个答案: