Блог

Главная - Вопросы по программированию - Текст в цветном поле

Текст в цветном поле

#html #css #text-alignment #text-decorations

Вопрос:

Я создаю простой веб-сайт портфолио HTML-CSS. Я изо всех сил пытаюсь найти способ стилизовать следующий текст так, как он показан на картинке.

желаемый результат

Очень важно отметить, что я добился некоторых результатов, но проблема в том, что текст здесь не центрирован слева направо. Это скорее случайное выравнивание, и я не знаю, как этого достичь. А также, пожалуйста, имейте в виду, что этот текст будет использоваться таким образом, что он будет помещен перед изображением. Поэтому он должен быть создан как своего рода компонент, который я смогу легко повторно использовать/выровнять позже с изображением.

Есть какие-нибудь идеи о том, как достичь таких результатов?

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

Достигнутые на данный момент результаты

Это мой код:

HTML

 /* Styles the header text "Hello, World!" putting it in a black box. */
   
.box {
   width: 50rem;
   margin: 0.2rem auto;
   font-family: 'Inter', sans-serif;
   font-weight: normal;
 }

 h1 {
   color: white;
   font-size: 2.5rem;
   line-height: 3rem; /* reduce size to remove gap between text */
   margin: 0px;
 }

 h1 span {
   background-color: #2d2d2d;
   padding-bottom: 0.8rem;
   padding-left: 1.2rem;
   padding-right: 1.2rem;
   -webkit-box-shadow: 1rem 0px 0px #2d2d2d, -1rem 0px 0px #2d2d2d;
   box-shadow: 1rem 0px 0px #2d2d2d, -1rem 0px 0px #2d2d2d;
   -webkit-box-decoration-break: clone;
   -ms-box-decoration-break: clone;
   -o-box-decoration-break: clone;
   box-decoration-break: clone;
 } 
 <!-- Hello World Text that floats over the header picture -->
<div class="box">
  <h1>
   <span>Hello, <br> amp;emsp; World!</span>
  </h1>
</div>

Заранее спасибо!

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

1. Использовать два элемента вместо одного? В конце концов, это презентация, а не содержание.

2. В идеале элемент черного ящика будет 1 элементом, а затем текст в синем поле будет другим. Они должны плавать в зависимости от местоположения курсора. Я не хочу, чтобы «Привет, мир!» рассматривалось как два разных элемента, потому что при плавании оно может выглядеть не очень хорошо.

Ответ №1:

Отступ текста может помочь вам здесь вместо добавления пробела вручную:

 h1 {
  color: white;
  font-size: 2.5rem;
  line-height: 3rem;    
  text-indent: -30px;
  margin:0;
  margin-left: 46px;
}

h1 span {
  background-color: #2d2d2d;
  padding: 0 1.2rem 0.8rem;
  -webkit-box-decoration-break: clone;
  -ms-box-decoration-break: clone;
  -o-box-decoration-break: clone;
  box-decoration-break: clone;
} 
 <h1>
    <span>Hello, <br> World!</span>
  </h1>

Ответ №2:

Вы можете разделить слова на разные промежутки:

 h1 span{
  color: white;
  font-size: 2.5rem;
  line-height: 3rem;    
  background-color: #2d2d2d;
  padding: 0 1rem;
}
.world{
  margin-left: 2rem;
} 
 <h1>
    <span class="hello">Hello,</span> <br>
    <span class="world">World!</span>
  </h1>
Метки: