HTML & CSS: 调整文本的背景矩形使其不跨越整个网页

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>

Answer 2

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

HTML & CSS: 调整文本的背景矩形使其不跨越整个网页

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

html

css

text

background

element