在 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

第一种方法是尝试使用带有阴影颜色white 的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%;
 }

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

Demo 3

如您所见，演示 2 和演示 3 使用相对偏移来缩小背景高度。只有第一个demo使用px，这里是另一个demo使用px，但需要浏览器支持多背景功能（目前所有浏览器都支持此功能，只有部分旧版本的IE em>不要，需要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.

Answer 2

也许你正在寻找padding:10px;