如何在 div 边框中显示标题

Question

对于一个客户，我们正在构建一个新的网站。他们希望在文本区域的边框内添加标题效果。如何使用CSS/HTML实现这一功能？ 我想要创建的效果看起来像这样：

在这张图片中，背景是绿色的，但在某些情况下，这是一张图片。因此，在文本中进行带有背景颜色的覆盖不起作用。
你有什么想法吗？

- Sjoerd

---

既然你从中赚钱，那么你至少应该尝试展示一下你编写代码的尝试。可以组合一个fiddle或者snippet。 - hopkins-matt

查看这个链接 - https://dev59.com/Sozda4cB1Zd3GeqPrM-n - Stickers

谢谢提供链接。我在搜索时找不到它。 - Sjoerd

Answer 1

这是我为您制作的一个示例。您只需将position: absolute;应用于联系人(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;}

- Keith