我有以下 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
最佳答案
如果你想给多个类一个背景色,你可以给多个类添加属性,用逗号分隔,像这样:
.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%,并且允许小数。
关于html - 如何使用css为单个字母赋予背景颜色,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/57722879/