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

549

20 февраля 2017, 18:11

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

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

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

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

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

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

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

Answer 1

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

body { 
  background-image: url(http://beerhold.it/800/403); 
} 
 
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; 
}

<fieldset> 
  <legend align="center">Lorem</legend> 
  <p>...content...</p> 
</fieldset> 
<fieldset> 
  <legend align="center">Ipsum</legend> 
</fieldset>

Answer 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(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 negative margins потребуют тонкую настройку семейства шрифтов, которые вы используете.

комментарии:

Вау. Благодарю web-tiki за такой быстрый ответ. Я не ожидал, то, что ты предложил выглядит идеально. Я надеюсь, что можно как-то вставить это в тему WordPress и заставить его работать. У вас есть идеи, как это будет реагировать на различные платформы, или это будет зависеть от того, какау тему WordPress я использую? Большое спасибо за вашу помощь! – @Miami Bass

@MiamiBass это решение является гибким. Вы должны все же испытать его на сборке и посмотреть, нет ли каких class overrides или других конфликтов с правилами CSS @web-tiki