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

Question

在我正在编码的网站中，设计师希望在背景颜色（照片上方）中使用粗糙的文本。该设计规定了左侧和右侧的一些填充以及均衡的背景：所有背景“块”具有相同的高度并且紧密堆叠在彼此之上。下图显示了一个示例。

为此寻找解决方案，结果表明这种设计有两个不同的挑战：

1. 确保将任何左右填充应用于所有行;以及

2. 确保垂直间距完美。

挑战1可以使用一些css-tricks on multi-line-padded-text来解决。这也已经在几个Q＆amp; A上进行了讨论：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。

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

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

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的设置相匹配（请参阅下文）非常重要，但这也是免费的＃39;甚至可以使用低于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请求（这将超过当前的70个字节，需要很长时间）。