编辑跨度背景色的高度 [英] Edit the height of the background-color of span

问题描述

是否可以在我的跨度中编辑背景颜色的高度?

Is it possible to edit the height of the background color in my span?

HTML

<span class="highlight">Some highlighted text</span>

CSS

  .highlight{
font-family: 'Roboto', sans-serif;
    font-weight: 300;
    font-size: 1.5em;
        background-color: #4db6ac;
        line-height: 2em;
    }

我想做的是将高亮显示为1.8em.我不知道如何实现它，而又不会使其变得过于乏味(即很多div).

What I want to do is for the highlight to be 1.8em. I'm not sure how to implement this without it being too tedious (ie. lots of divs ).

推荐答案

您可以使用具有垂直顶部和底部颜色的垂直线性渐变(在示例中使用红色).

You can use a vertical linear-gradient with transparent top and bottom color (I've used red in the example).

由于 line-height ，元素的高度为 2em ，因此 1.8em 为90％.用两个透明带(每个带5％的高度)创建一个渐变(在演示中为红色).90％的其余部分将成为突出显示颜色.

The height of the element is 2em because of the line-height, so 1.8em is 90%. Create a gradient with two transparent strips (red in the demo) of height 5% each. The rest of the 90% will be the highlight color.

.highlight {
  font-family: 'Roboto', sans-serif;
  font-weight: 300;
  font-size: 1.5em;
  background: linear-gradient(to bottom, red 5%, #4db6ac 5%, #4db6ac 95%, red 95%);
  line-height: 2em;
}

<span class="highlight">Some highlighted text</span>

这篇关于编辑跨度背景色的高度的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！