Вставить текст в border CSS HTML

#css #html5 #text #background #border

Мне нужно вставить текст по центру в верхнюю и нижнюю  границу, которые будут иметь
фоновое изображение позади них. Это будет  на каждой странице. Я могу добиться этого
с помощью CSS?     

Пожалуйста, посмотрите скриншот того, что я имею в виду:     

    

Граница должна быть белого цвета, 3 пикселя в ширину, а шрифт - Basis Grotesque Medium.    

Я надеюсь начать с редактирования темы WordPress.    

Надеюсь, что на этот вопрос не был получен ответ в другом месте. Я пытался искать,
но не мог найти то, что мне нужно.    

Прежде чем  идти вперед и начать строить этот сайт, не могли бы вы сказать мне, если
это возможно,  как я могу  достигнуть этого?    

Источник: Insert text in border CSS HTML
    

Ответы

Ответ 1

Добавлю свои 5 копеек...



body {
  background-image: url(https://avatars.mds.yandex.net/get-pdb/1016956/27ec7a52-f169-49d8-b895-10a84386bb8b/s1200);
background-repeat: no-repeat;
}

fieldset {
  border: 3px solid white;
  border-bottom: none;
  color: white;
}

fieldset+fieldset {
  transform: rotatex(180deg);
}

fieldset+fieldset>legend {
  transform: rotatex(180deg);
}

fieldset>p:last-child {
  margin-bottom: 0;
}

  
Lorem
  
...content...


  
Ipsum



Ответ 2

Вы можете использовать тот подход, который я описал здесь - Line separator under
text and transparent background - на линии слева/справа от названия.    

Затем вы можете использовать отрицательные поля top/bottom margin, и расположите
их на нижней и верхней границах :



@import url(http://fonts.googleapis.com/css?family=Open+Sans:300);
 body {
  background-image: url(https://avatars.mds.yandex.net/get-pdb/1016956/27ec7a52-f169-49d8-b895-10a84386bb8b/s1200);
  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;}

  
Top title
  
...Content here...
  
Bottom title





Обратите внимание, что top/bottom negative margins потребуют тонкую настройку  семейства
шрифтов, которые вы используете.