在图像上放置一个 div答案

【问题标题】：placing a div over an image在图像上放置一个 div
【发布时间】：2013-03-10 23:52:51
【问题描述】：

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

【问题讨论】：

标签： html

【解决方案1】：

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

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

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

【讨论】：

谢谢。当我在 IE 中预览它时，我的字体颜色会发生变化，并且 div 宽度增加到它所在的 div 的 100%。 .divlocation { 颜色：#FFF;向左飘浮;背景：rgb(0, 0, 0); /* 后备颜色 */ background: rgba(0, 0, 0, 0.7);最大宽度：100px； }

thisdivsucks
这不兼容IE吗？
我不确定你到底想表达什么。
我想在图像上放置一个 div。所以我按照你的指示，但它不起作用。问题可能是这两个div在表和其他div中吗？
是的，这与我检查过的所有浏览器兼容。不确定，但在您粘贴的代码中缺少：'
'到底是粘贴错误吗？

【解决方案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;
}

【讨论】：

【解决方案3】：

这有点棘手......

在 iframe/视频上放置一个 div...

（只需将 iframe 替换为您的图像）......

trick 部分用于视频...您必须将 ... ?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>

【讨论】：