在 CSS 中，可以让 TEXT 的背景变成某种颜色吗？答案

【问题标题】：In CSS, can you make the background of TEXT a certain color?在 CSS 中，可以让 TEXT 的背景变成某种颜色吗？
【发布时间】：2015-03-21 13:48:15
【问题描述】：

我可以更改文本块的背景颜色，但我希望它看起来像是用荧光笔突出显示的文本。是否可以只更改字符背景颜色？

【问题讨论】：

你能发布一个期望结果的例子吗？因为目前还不清楚您要做什么。

标签： css text colors background

【解决方案1】：

有很多方法可以实现这一目标。请参阅下面的方法。

方法：

将您打算选择的文本包装在 span 或 strong 中，并带有位置值亲戚的
使用 :before 或 :after 选择器创建叠加层。
降低 after 或 before 元素的不透明度以创建高亮效果

#content  {
  font-size: 18px;
  line-height: 20px;
  width: 500px;
  }

.highlighter, .one, strong  {
  position:relative;
  height: 20px;
  font-size: 18px;
  line-height: 18px;
  display: inline-block;
  }

 strong:after, .highlighter:after, .one:after  {
  content:'';
  position:absolute;
  height: 18px;
  width: 100%;
  opacity: 0.40;
  left: 0;
  }

 strong:after  {
  background-color: green;
  
  }

.highlighter:after  {
  background-color: red;

  }

.one:after  {
  background-color: orange;

  }

<div id="content">



 <span class="one">bzds</span> Lorem ipsum <strong> dolor sit amet, consectetuv</strong>  sdgag r adipiscing elit. Curabitur quam augue, vehicula quis Lorem ipsum dolor <span class="highlighter">sit amet, consectetuer adipiscing</span> elit. Curabitur quam augue, vehicula quis
  sit amet, consectetuer adipiscing elit. Curabitur quam augue, vehicula quis



</div>

【讨论】：

【解决方案2】：

我们有一个标签可以直接突出显示一些内容：

<mark> content here </mark>

或者，您可以使用@Victor 建议的方法

【讨论】：

【解决方案3】：

使用span 标签：

.highlight {
    background-color: #FFFF00;
}

<span class="highlight">Yellow text.</span>

【讨论】：