在中断的内联元素上创建背景颜色

Question

在我正在编写代码的网站中，设计师希望拥有带有背景颜色（在照片上）的不规则文字。该设计在左侧和右侧都规定了一些填充以及平衡的背景：所有背景“块”具有相同的高度并紧密堆叠在一起。下图显示了一个示例。

为此寻找解决方案，结果发现这种设计有两个明显的挑战：

1. 确保所有左右填充都应用于所有行；和

2. 确保垂直间距完美。

挑战 1 可以使用一些css-tricks on multi-line-padded-text 来解决。这也已在 SO 上的几个问答中讨论过：span background-color & padding problems、CSS create padding before line-break，以链接一些。

挑战 2 有点棘手，并且还与 box-shadow 解决方案有关，用于所有行的左右填充。

首先关于最后一点：即使在仔细设置文本的顶部和底部填充后，我还是注意到了一些细微的错误（在 Firefox 中，这绝对是目标浏览器之一）：

这些细微的线条也可能在缩放时出现在（某些）线条之间。这将表示不精确的行高（因此填充）。但是，将垂直填充设置太多（为了安全起见）也有问题：

我在这里使用了半透明背景（和框阴影）来突出问题。首先，该解决方案不适用于需要透明度的情况。第二：背景“块”不再等高（例如，第 2 行和第 4 行之间的间隙比第 4 行窄得多）。

事实证明，设置正确的填充存在一个固有的问题：无法准确预测实际的 line-height 有多高（即，如果不深入非常字体度量）。尤其是在使用的字体不可预测的情况下（这在网络上很常见）。

---

所以问题是，如何为流动的文本添加背景颜色，使其左右填充正确，并使线条完全堆叠在一起？

一些注意事项：

• 设置display: inline-block 是禁忌：它将创建一个矩形背景。

• 上述解决方案工作“有点”，这还不够。如图所示，他们有自己的问题。

• 显然，我正在寻找纯 CSS 解决方案，而不是 javascript。

• 当然，使用的文本是服务器生成的，可以更改。

我找到了一种适合我的解决方案：使用正确颜色的背景图像，它可以恰好缩放到一个行高。我将提交这个自我回答。虽然我确实喜欢这个 hack，但我仍然愿意接受其他建议。

Answer 1

<p>
    <span>Lorem ipsum dolor sit amet ...</span>
    <span>Sed ultrices, leo eu porta mattis ...</span>
</p>

p {
    width: 30em; /* as needed */
    font-size: 12px;
    line-height: 2;
}
span {
    padding: 0.6em 0.5em;
    background-image: url(data:image/gif;base64,R0lGODdhAQABAIABAFVVVf///ywAAAAAAQABAAACAkQBADs=);
    -webkit-box-decoration-break: clone;
    -ms-box-decoration-break: clone;
    -o-box-decoration-break: clone;
    box-decoration-break: clone;
    background-repeat: repeat-x;
    background-size: 1px 2em ;
    background-position: center;
}

请注意，我没有指定 font-family：字体度量现在不再是问题。此外，可以使用任何font-size。将line-height 与span 的设置相匹配很重要（见下文），但这也是“免费的”。甚至可以使用低于normal 的行高，尽管在这种情况下，上升和下降当然可以从背景延伸。

实际的技巧是指定背景图像并将其高度完全设置为等于行高（在此示例中为2em）。为此，我使用了在 Gimp 中制作的单像素 gif 图像。 data-uri 中的字符串只是 gif 文件的 base-64 编码内容（35 个字节）。然后使用 background-size 将此 gif 扩展至所需的高度，并设置 background-repeat: repeat-x 确保正确设置宽度。不设置垂直重复允许我们设置不精确的垂直填充量（见下文）。 background-position: center 负责将文本与背景垂直对齐。

垂直填充是技巧的另一部分：将其设置得足够高，以使填充（顶部和底部）加上行框高度超过行高。 0.5em 应该已经足够了，但我在这里使用0.6em 是为了安全起见（它与0.5em 水平值很好区分）。因为没有背景色，所以背景图片之外的一切都是透明的！ （如果 span 继承了一些背景颜色，只需将其覆盖为 transparent）

水平填充（这里是0.5em）和box-decoration-break: clone 设置（也有前缀，虽然我不知道实际需要哪个）负责左右填充，也将它设置为所有行。

对于半透明背景，可以使用 dito png-image 代替 gif。由于文件大小，我在这里选择了一个 gif。图像也可以单独加载，但使用 data-uri 会保存一个 http-request（这将超过当前的 70 个字节并且需要很长时间）。