Question

我想达到这个效果： enter image description here

但有图像背景。我尝试了我能想到的一切，但似乎我仍然得到了这个：

enter image description here

很明显，background-color: transparent无法正常工作，也无法设置颜色。我想也许有一个＆＃34; hack＆＃34;我可以用来使我的h2重叠在盒子的边框上。

＆＃13;

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

＆＃13;

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

＆＃13;

Answer 1

您可以单独创建顶部边框（左侧和右侧使用伪内容）。

＆＃13;

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

＆＃13;

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

＆＃13;

Answer 2

滥用<fieldset>和<legend>。

不是语义但有效。

＆＃13;

body {
  background: pink;
}
legend {
  margin: auto;
  width: 25%;
  text-align: center;
}
fieldset {
  text-align: center;
  border: 10px solid red
}

＆＃13;

<fieldset>
  <legend>About Us</legend>
  <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aspernatur illo est eius temporibus unde earum.</p>
  <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Pariatur consectetur maiores laudantium officiis adipisci quasi est commodi voluptas perferendis ex itaque hic qui dolorem alias!</p>
</fieldset>

＆＃13;

Answer 3

我会使用不同的div。将背景设为白色并将其置于顶部。

这里是jsfiddle

https://jsfiddle.net/0wet9Lf7/

CSS

    .main {
    border:2px solid #000;
    width:400px;
    height:200px;
    background:none;
    padding:10px;
}
.title {
  background: #fff none repeat scroll 0 0;
    font-size: 21px;
    height: 30px;
    margin-left: 141px;
    margin-top: -21px;
    padding: 3px;
    text-align: center;
    width: 100px;

}

Answer 4

我能想到的解决方案就是将它全部放在一个有三列的表格中，左上角和右上角td可以有一个边框底部：1px实体..而中间的td可以没有麻烦，文字要么相对放置或具有负边距，使其在左右TD的边界顶部（或边界底部）之间的中间垂直，可能类似于：

<table style="border: 0px 1px 1px 1px solid black;">
  <tr>
    <td style="border-bottom: 1px solid black;"></td>
    <td><div style="position: relative; top: 10px;">text</div></td>
    <td style="border-bottom: 1px solid black;"></td>
 </tr>...

父母的重叠边界与h2边际负面

4 个答案: