Question

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

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）。

Answer 1

您可以使用具有透明顶部和底部颜色的垂直线性渐变（在示例中我使用了红色）。

由于2em，元素的高度为line-height，因此1.8em为90％。使用两个透明条带（演示中为红色）创建一个高度为5％的渐变。 90％的其余部分将是亮点颜色。

＆＃13;

.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;
}

＆＃13;

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

＆＃13;

Answer 2

通过将display属性设置为inline-block，您的背景大小将等于行高而不添加任何div。希望这对你有用！

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

Answer 3

将显示属性添加为内联块，您的背景大小将等于行高而不添加任何div。这对你有用！

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

}

Answer 4

如果有人在寻找有关如何扩展<span>元素文本的背景色使其比文本本身高的答案，但仍然希望<span>内联，则没有答案由于背景颜色不受跨度的line-height或height的影响，因此其他解决方案也可以使用。它仅受font-size和padding的影响。对于这种情况，这将是一个适当的解决方案：

.highlight {
    background: yellow;
    padding: 0.25em 0; /* ('line-height' - 'font-size') / 2 */
}
body { font-size: 1em; line-height: 1.5em; }
span.no-padding { padding: initial; }

<p style="width:400px">
  Here is a bunch of text that will have some highlighted text within it.
  <span class="highlight">
    Here is some highlighted text that will span multiple lines and will have a full height background color.
  </span> 
  Here is also some highlight text without the padding. 
  <span class="highlight no-padding">
    Here is some highlighted text without a full height background, regardless of having the same 'line-height'
  </span>
</p>

编辑span的背景颜色的高度

4 个答案: