html - 在CSS中调整字体的背景颜色

Question

我有 CSS，使用 Brandon Text 作为字体，将文本颜色的范围设置为白色，将背景设置为红色。这是我的 HTML 代码

<div class="headline">
    <span>Long Headline Wrapping Around</span>
</div>

这是我的CSS文件

.headline {
    color: white;
}

.headline span {
    font-family: 'Brandon Text', Helvetica, Arial;
    font-size: 36px;
    font-weight: 700px;
    line-height: 56px;
    background-color: #DD3300;
}

但是背景尺寸太厚了。有没有办法调整它的大小？ line-height主要是针对文字之间的间距，与背景本身的大小无关。我猜这与 Brandon Text 字体占用的空间(我不知道这个术语)有更多关系，而不是与 CSS 调整背景大小的能力有关。

编辑:金刚的回答很好，但现在我有一个额外的并发症。我还使用了 box-shadow，所以上面 .headline span 的 CSS 更像是:

.headline span {
    font-family: 'Brandon Text', Helvetica, Arial;
    font-size: 36px;
    font-weight: 700px;
    line-height: 56px;
    background-color: #DD3300;
    padding: 0;
    display: inline;
    box-shadow: 12px 0 0 #DD3300, -12px 0 0 #DD3300;
}

Answer 1

第一种方法是尝试使用阴影颜色为白色的box-shadow(理论上与父背景颜色相同):

.headline span {
  ...
  box-shadow:0 3px 0 0 white inset,
  0 -3px 0 0 white inset;
}

Demo 1

第二种方法(我认为更好)是为您的元素使用 linear-gradient 背景:

.headline span {
  ...
  background: linear-gradient(transparent 10%, #DD3300 10%, #DD3300 90%, transparent 90%);
}

Demo 2

使用线性渐变背景设置背景大小和背景位置:

.headline span {
   ...
   background: linear-gradient(#DD3300, #DD3300) no-repeat;
   background-position:center;
   background-size:100% 90%;
 }

请注意，您可以对 background-size 的高度部分使用 calc(100% - 3px)。虽然 calc 在 IE 和 Opeara 的某些旧版本中不受支持，请参阅calc() supports .

Demo 3

如您所见，演示 2 和演示 3 使用相对偏移来缩小背景的高度。只有第一个demo使用了px，这里还有一个demo使用了px，但是需要浏览器支持多背景功能(目前所有的浏览器都支持这个功能，只有一些旧版本IE 不需要，需要 IE9+，请参阅 CSS3 Multi-background support ):

.headline span {
  ...
  background: linear-gradient(#DD3300, #DD3300) no-repeat,
              linear-gradient(#DD3300, #DD3300) no-repeat;
  background-position:left top 3px, left bottom 3px;
  background-size:100% 50%;
}

Demo 4.