<分区>
我们正在为客户建立一个新网站。他们想要标题位于文本区域边界的效果。如何使用 CSS/HTML 完成此操作。 我想要创建的效果如下所示:
在这张图片中，背景是绿色的，但在某些情况下，这是一张图片。因此，文本中带有背景色的叠加层将不起作用。
有什么想法吗？
<分区>
我们正在为客户建立一个新网站。他们想要标题位于文本区域边界的效果。如何使用 CSS/HTML 完成此操作。 我想要创建的效果如下所示:
在这张图片中，背景是绿色的，但在某些情况下，这是一张图片。因此，文本中带有背景色的叠加层将不起作用。
有什么想法吗？
最佳答案
这是我为您制作的示例。你只需要申请 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;}
关于html - 如何在div的边框中显示标题，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/31679636/