HTML & CSS : Adjust background rectangle on text so it does not span entire webpage

Question

我的 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; 
}

网页:

生成的网页看起来很奇怪。具体来说，我希望设置为 #F5F5F5 的文本背景色不会延伸到整个屏幕。

实际上，我只希望文本后面的背景矩形的大小比实际文本的大小大一点。

我该怎么做？

Answer 1

您可以将 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>