CSS：文本大小的背景颜色

Question

我想为文本的背景着色，但只是为了它的大小。

图像胜过千言万语，这就是我想要实现的目标：

这就是我所取得的成就

我不想以编程方式执行此操作，我希望背景能够适应文本（因为它可能是动态的）

无论如何不使用javascript来执行此操作吗？

更新（HTML）：

<div class="team-member-teaser-name">OSCAR</div>

CSS

.team-member-teaser-name
{
    color: #4fb4d0;
    background: #135364;
    margin-top: 5px;
    margin-bottom: 5px;
    padding-left: 5px;
    font-size: 10px;
}

更新（已解决，基于@BoldClock答案）：

.team-member-teaser-name
{
    color: #4FB4D0;
    background: #135364;
    margin-top: 5px;
    padding-left: 5px;
    font-size: 10px;
    display: inline;
    float: left;
    padding-right: 9px;
    clear: both;
}

我真的不明白清楚有多清楚，但是需要在图像上达到效果。

Answer 1

您需要将背景颜色应用于内联元素。如果文本在块元素中，则需要将文本包装在块元素的内联子元素中（假设将display: inline放在块元素上是不可行的）。如果您无法编辑HTML，则必须在脚本中执行此操作。

Answer 2

您可以将文字换成这样的范围：

<p><span class="highlight">OSCAR</span></p>

然后，根据你当前的css，你可以这样设置：

.highlight{
    background-color: blue; 
}

Answer 3

使用background属性定义背景颜色。例如，

<a href="#">oscar</a>

a{ background:#ff0000; }

如果您想要在元素上定义高度和宽度，则可以使用<span />或<a />等内联元素向样式添加display:block。此外，如果要控制文本周围的间距区域，还可以在元素上定义填充，以便为文本提供一些喘息空间。