HTML & CSS: отрегулируйте фоновый прямоугольник для текста, чтобы он не занимал всю веб-страницу - PullRequest
Новая
       69

HTML & CSS: отрегулируйте фоновый прямоугольник для текста, чтобы он не занимал всю веб-страницу

0 голосов
/ 24 июня 2019

У меня есть следующий код в разделе тела моего файла индекса HTML.

<div class="titleMessage">

    <div class="heading">

        <p class="main">NAME HERE</p>
        <p class="sub">Software Engineer</p>

    </div>
</div>

Ниже мой код CSS: 

.titleMessage {
    position: absolute;
    width: 100%;
    height: 250px;
    top: 50%;
    z-index: 5;
    text-align: center;
    margin-top: -125px;
}


.titleMessage .heading p{
    color:  #080808;
    text-shadow: 0px 2px 5px rgba(0,0,0,0.4);
    font-weight: 100;
    letter-spacing: 7px;
    background: #F5F5F5; 
    background-size: contain;
}

.titleMessage .heading .main{
    font-size: 50px; 
}


.titleMessage .heading .sub{
    font-size: 23px; 
}

Веб-страница:

enter image description here Полученная веб-страница выглядит странно.В частности, я хочу, чтобы цвет фона в моем тексте, который установлен на #F5F5F5, не растягивался по всему экрану.

На самом деле, я только хочу, чтобы размер прямоугольника фона позади текста был немного больше, чем размер реального текста.

Как мне это сделать?

Ответы [ 2 ]

0 голосов
/ 24 июня 2019

Я делаю некоторые изменения в вашем CSS: 

.titleMessage {
  margin-top:10rem;
  display:flex;
  align-items:center;
  justify-content:center;
  width: 100%;
  z-index: 5;
}


.heading p{
    color:  #080808;
    text-align:center;
    text-shadow: 0px 2px 5px rgba(0,0,0,0.4);
    font-weight: 100;
    letter-spacing: 7px;
    background: #F5F5F5; 
}

.titleMessage .heading .main{
    font-size: 50px; 
}


.titleMessage .heading .sub{
    font-size: 23px; 
}
0 голосов
/ 24 июня 2019

Вы можете разместить теги span вокруг этих текстов и применять background только к этому промежутку (промежутки являются встроенными элементами, поэтому они не растягиваются по доступной ширине). Кроме того (как показано ниже) вы можете добавить немного padding, чтобы иметь больше контроля над тем, насколько будет расширяться фон: 

.titleMessage {
    position: absolute;
    width: 100%;
    height: 250px;
    top: 50%;
    z-index: 5;
    text-align: center;
    margin-top: -125px;
}


.titleMessage .heading p{
    color:  #080808;
    text-shadow: 0px 2px 5px rgba(0,0,0,0.4);
    font-weight: 100;
    letter-spacing: 7px;
}
.titleMessage .heading p span{
    background: #F5F5F5; 
    padding: 6px 12px 0;
}
.titleMessage .heading .main{
    font-size: 50px; 
}


.titleMessage .heading .sub{
    font-size: 23px; 
}
<div class="titleMessage">

    <div class="heading">

        <p class="main"><span>NAME HERE</span></p>
        <p class="sub"><span>Software Engineer</span></p>

    </div>
</div>
...