如何在div的边框中显示标题

Question

对于客户，我们正在建立一个新网站。他们想要一个标题位于文本区域边界的效果。如何使用CSS / HTML完成此操作。 我想要创建的效果如下所示：

在此图像中，背景为绿色，但在某些情况下，这是一张图像。因此，文本中带有背景颜色的叠加层不起作用。

有什么想法吗？

Answer 1

这是我为你做的一个例子。你只需要申请职位：绝对;到联系div然后设置你希望它与下一个div重叠的位置。 http://jsfiddle.net/tzrhcmb4/

<div class="main">
   <div class="container">
      <div class="text-header">CONTACT</div>
          <div class="text"> Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing  software like Aldus PageMaker including versions of Lorem Ipsum.

    </div>
  </div>
</div>

 css:

.main { background: green; width: 500px; height: 300px;}
.container { width: 100%; height: 100%; padding-top: 20px;}
.text-header { color: white; text-align: center; top: 30px; width: 110px; left: 35%; position: absolute; background: green;}
.text { margin: 10px; text-align: left; padding: 20px 10px 20px 10px; border: 2px dashed lightgreen;}