CSS：仅在文本后面而不是整个部分添加背景颜色答案

【问题标题】：CSS: Add Background color only behind text and not entire sectionCSS：仅在文本后面而不是整个部分添加背景颜色
【发布时间】：2021-09-16 03:15:03
【问题描述】：

我有 2 行的文本，如下所示：

This is a line
<br>
This is another line

我只需要在文本后面添加背景颜色

但只在字母的后面，而不是整个部分。

我怎样才能做到这一点？

【问题讨论】：

【解决方案1】：

文本应该在<p> 或<h1> 或类似的范围内。您可以向该元素添加样式属性（直接或使用单独的 .css 文件）。在您的情况下，您需要“背景颜色”：

<p style="background-color: red;"> Your text here </p>

Here 是有关文本和颜色的更多信息的链接。

【讨论】：

【解决方案2】：

将元素放入 span 将解决此问题。试试这个：

<span style="background-color: black;">
This is a line
<br>
This is another line
</span>

【讨论】：

【解决方案3】：

如果您想“勾勒”文本，就好像它是笔画而不是背景一样，您可以使用 -webkit-text-stroke 元素样式。

您首先需要将文本包装在 html 标记中，例如

或者并对其应用一个类。

<p class="textOutline">
This is a line
<br>
This is another line
</p>

然后应用 webkit-text-stroke 样式：

.textOutline {
webkit-text-stroke: #000;
    -webkit-text-stroke-width: medium;
}

请注意，这在旧版浏览器中可能不起作用或显示不同。

您也可以像上面那样应用背景 ^ 并减少元素周围的填充以使背景更接近文本。这看起来不像中风 ^ 但它会比你现在的更接近。

【讨论】：