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

Question

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

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

有什么想法吗？

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;}

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

How to show a title in the border of a div

html

css

border

title