调整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;
}

但背景尺寸太厚。有没有办法调整它？行高主要用于文本之间的间距，但与背景本身的大小无关。我猜测它与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的{​​{1}}（理论上与父背景颜色相同）：

white

Demo 1

第二种方法（我认为更好）是为您的元素使用.headline span { ... box-shadow:0 3px 0 0 white inset, 0 -3px 0 0 white inset; } 背景：

linear-gradient

Demo 2

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

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

请注意，您可以将.headline span { ... background: linear-gradient(#DD3300, #DD3300) no-repeat; background-position:center; background-size:100% 90%; } 用于calc(100% - 3px)的高度部分。虽然某些旧版本的 IE 和 Opeara 不支持background-size，但请参阅{{3 }}

calc() supports

如您所见，演示2和演示3使用相对偏移来缩小背景的高度。只有第一个演示使用calc，这是另一个演示使用px，但它需要浏览器支持多背景功能（所有当前浏览器都支持此功能，只有一些旧版本的 IE 不需要IE9 +，请参阅Demo 3）：

px

CSS3 Multi-background support

Answer 2

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