CSS-文本的背景色

时间:2018-11-05 13:03:08

标签: html css

请仔细阅读此代码,然后查看输出。我的要求是我需要给文本加上行高。但这会影响文本背景色。我不想将所有句子放在单独的div或p中。而且我不能将height属性用于文本bg颜色。你有什么主意吗?如果是这样,请分享。谢谢

.nb-semnox-impact-grid {
  display: block;
  font-size: 60px;
  text-align: center;
  line-height: normal;
}
.nb-semnox-impact-grid span {
  font-family: 'GilroyBold';
  display: inline-block;
  position: relative;
}
.nb-semnox-impact-grid span.nb-bold-font {
  font-size: 135px;
}
.nb-semnox-impact-grid span.nb-bg-yellow::after {
  content: '';
  display: block;
  background-color: #fff200;
  height: 100%;
  width: 100%;
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  margin: auto;
  z-index: -1;
}
.nb-semnox-impact-grid span.nb-bg-blue::after {
  content: '';
  display: block;
  background-color: #78d0f0;
  height: 100%;
  width: 100%;
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  margin: auto;
  z-index: -1;
}
<div class="nb-semnox-impact-grid">
  <span class="nb-bold-font"> 47% </span> of <br> the feature <span class="nb-bg-yellow"> #landingpage </span> <br> was <span class="nb-bg-blue"> #meeting time </span>
</div>

1 个答案:

答案 0 :(得分:-1)

只需在span.nb-bg-yellowspan.nb-bg-blue内添加所需大小的HttpClient.GetAsync());