цвет фона на разделенном тексте в том же элементе

Question

Я пытаюсь сделать этот эффект на сайте, над которым я работаю: введите описание изображения здесь

HTML:

<h1 class="bigHeadline">Trendy lobby og business center i Københavns centrum</h1>

CSS:

padding: 3px 0 0;
font-size: 44px;
line-height: 57px;
margin: 0 auto;
display: inline;
-webkit-box-shadow: 15px 0 0 rgba(0,0,0,.7), -15px 0 0 rgba(0,0,0,.7);
box-shadow: 15px 0 0 rgba(0,0,0,.7), -15px 0 0 rgba(0,0,0,.7);
background-color: rgba(0,0,0,.7);
color: #fff;
font-family: Roboto;
font-weight: 200;
text-transform: uppercase;

Мне нужно, чтобы текст всегда был близко (уберите неокрашенный штрих между ними), но если я попытаюсь исправить его с помощью line-height, он ломается при изменении размера и / или других браузерах.

Answer 1

вот мое решение:

CSS:

#bigHeadline {
  display: inline-block;
  padding: 1vh 1vw;  
  margin: 0 4vw;
  color: #fff;
  background-color: rgba(0, 0, 0, 0.7);  
  font-family: Roboto;
  font-weight: 200;  
  text-transform: uppercase;
  -webkit-box-shadow: 15px 0 0 rgba(0,0,0,.7), -15px 0 0 rgba(0,0,0,.7);
  box-shadow: 15px 0 0 rgba(0,0,0,.7), -15px 0 0 rgba(0,0,0,.7);
  background-color: rgba(0,0,0,.7);
}

<h1 id="bigHeadline">
  Trendy lobby og business center 
</h1>

<h1 id="bigHeadline">
  I Københavns centrum
</h1>

Я разделил текст на две части h1, чтобы вы могли легче контролировать две части текста. Я также использовал display: inline-block, таким образом, два фрагмента текста всегда будут один над другим (часть «block»), но так как фон должен просто покрывать текст, вам нужен «inline» часть