html - 如何在图像上放置一个div？

Question

我想<div>在<img>.

这是HTML：

body {
  background-color: #cCa;
}

.image {
  position: relative;
  background-repeat: no-repeat;
}

.content {
  background-color: lightGrey;
  position: absolute;
  overflow: none;
  left: 40px;
  top: 40px;
}

<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/2.3.2/css/bootstrap.min.css" rel="stylesheet"/>
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/2.3.2/css/bootstrap-responsive.min.css" rel="stylesheet"/>

<div class="container-fluid">
  <div class="row-fluid">
    <div class="span12">
      <div class="image"> <img src="css_js/img/image.jpg"> </div>
      <div class="content img-circle">[content]</div>
    </div>
  </div>
</div>

更多图片信息：

这是窗口视口很大时的样子。

这是窗口视口较小时的样子。

关于如何解决它的想法？任何帮助都会很棒！

Answer 1

尝试将z-index内容的属性设置为div高于图像，如下所示：

.content{
    z-index: 3;
}

这将使内容div位于图像上方。为了让它随着浏览器变小而变大，您将需要使用媒体查询。这些是您包含在脑海中的标签，可让您根据屏幕大小加载不同的 CSS 文件。基本上，当屏幕较小时，您应该为加载的 CSS 文件设置较大的字体设置。如果您不熟悉媒体查询，这是阅读它们的好地方：https ://developer.mozilla.org/en-US/docs/Web/Guide/CSS/Media_queries 。祝你好运！

更新：

根据您的评论，您应该将代码更改为：

<div class="span12">
    <div class="image"> 
        <img src="css_js/img/image.jpg"> 
        <div class="content img-circle">[content]</div>
    </div>
</div>

这使得img和.content被 包裹起来.image。然后，在您的 CSS 文件中，添加以下规则：

.content{
    position: relative;
}

这将改变内容相对于图像所在位置的div位置。阅读该position物业以了解如何移动.content。您仍然需要媒体查询来更新大小/位置div以响应浏览器大小的变化。