在边框中插入文本 CSS HTML

Question

我需要在内部边框（均居中）的上部和下部插入文本，其后面会有背景图像。这在每个页面上都是相同的。我可以使用 CSS 实现吗？

请看我的意思截图：

边框需要宽度为 3px，颜色为白色，字体为 Basis Grotesque Medium。

我希望从 WordPress 主题开始并对其进行编辑。

希望这个问题以前没有在任何地方得到回答。我尝试了运行搜索，但找不到我需要的东西。

在我开始构建这个网站之前，您能否告诉我这是否可行以及我将如何实现它？

Answer 1

对于标题 left/right 上的行，您可以使用我在此处 Line separator under text and transparent background 描述的方法。

然后您可以使用负 top/bottom 边距将它们定位在底部和顶部边框上：

@import url(http://fonts.googleapis.com/css?family=Open+Sans:300);
 body {
  background-image: url(http://fr.playstation.com/media/5ZfqPjVF/BigSkyInfinity_Hero_EN.JPG);
  background-repeat: no-repeat;
  background-size: cover;
  font-family: 'Open Sans', sans-serif;
  color:#fff;
}
#content{
  border:3px solid #fff;
  border-width:0 3px;
  display:inline-block;
  margin:50px 0;
  width:100%;
}
.divider {
  font-size:30px;
  margin: -0.65em auto -0.45em;
  overflow: hidden;
  text-align: center;
  line-height: 1.2em;
}
.divider:before,
.divider:after {
  content: "";
  vertical-align: top;
  display: inline-block;
  width: 50%;
  height: 0.65em;
  border-bottom: 3px solid #fff;
  margin: 0 2% 0 -55%;
}
.divider:after {
  margin: 0 -55% 0 2%;
}
p{margin: 150px 0;}

<div id="content">
  <h1 class="divider">Top title</h1>
  <p>...Content here...</p>
  <h2 class="divider">Bottom title</h2>
</div>

请注意，top/bottom 负边距需要根据您使用的 font-family 进行调整

在边框中插入文本 CSS HTML

Insert text in border CSS HTML

css

text

background-image

border