如何在图像上放置一个div？ [关闭]

Question

我想在<img> 上放置一个<div>。

这是 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

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

.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 的大小/位置，以响应浏览器大小的变化。