html - 与 h2 边距为负的父级重叠边界

Question

我想实现这样的效果:

但有图像背景。我尝试了我能想象的一切，但似乎我仍然明白:

很明显 background-color: transparent 不会起作用，也不会设置颜色。我在想也许有一个“hack”可以让我的 h2 与框的边界重叠。

.box {
  border: 1px solid white;
}

.box h2 {
  margin: -15px auto 20px;
  width: 250px;
  font-size: 25px;
}

<div class="box">
  <h2>ABOUT US</h2>
</div>

Answer 1

您可以单独创建顶部边框(左 + 右带有伪内容)。

body {
    background: gold;
}
div {
    border: 1px solid black;
    border-top-width: 0;
    text-align: center;
}
h2 {
    display: table;
    width: 100%;
    margin-bottom: -10px;
}
h2:before, h2 > span, h2:after {
    display: table-cell;
    white-space: nowrap;
}
h2 > span {
    padding: 0 10px;
    position: relative;
    top: -10px;
}
h2:before, h2:after {
    content: "";
    border-top: 1px solid black;
    width: 50%;
}

<div>
    <h2><span>Hello World</span></h2>
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
</div>