html - 如何使用css为单个字母赋予背景颜色

Question

我有以下 div 元素。

<div class="de">d</div>
<div class="es">e</div>
<div class="si">s</div>
<div class="ig">i</div>
<div class="gn">g</div>
<div class="ns">n</div>

我想为某些 div 应用背景颜色。

我试过下面的代码:

.si {background-color: #00ff00} 

虽然，这给了它一个背景颜色，但只覆盖了字母的三分之一。

S 和 I 都有背景色 00ff00 但每个字母只有三分之一被覆盖。

页面here

Answer 1

如果你想给多个类一个背景色，你可以给多个类添加属性，用逗号分隔，像这样:

.si,
.gn {
  background-color: #00ff00;
}

您还可以像这样向组(例如所有 <div> 标签)添加背景:

div {
  background-color: #00ff00;
}

或者甚至只是 <div>带有 class 的标签属性

div[class] {
  background-color: #00ff00;
}

编辑:从下面的评论中，确保 s被背景完全覆盖，需要保证line-height更高。目前，你有一个 font-size的 300px对于字体，但没有 line-height设置，所以 line-height字体的继承自具有行高设置的最接近的父级。这可能只是文档的默认行高(通常为 ~18px 左右)。

要解决此问题，请将元素的行高设置为相对于字体大小(例如 line-height: 1em 或 line-height: 1.2em )或显式设置行高(例如 line-height: 320px )。

请注意 em单位是相对的，用1与字体大小相同且有效为 100%，并且允许小数。