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

在我正在编写的一个网站中，设计师希望有一个背景色的不规则文本（在照片上）。该设计规定了左右两侧的一些填充，以及良好的平衡背景：所有背景“块”具有相同的高度，并紧密堆叠在彼此的顶部。下图显示了一个示例

为了寻找解决方案，这种设计有两个不同的挑战：

确保对所有行应用任何左、右填充；及

确保垂直间距完美

挑战1可以用一些方法解决。这一点在这里也已经讨论过了，所以有几个问答：，以链接一些

挑战2有点棘手，它还与所有行的左右填充的

框阴影

-解决方案有关

首先谈谈最后一点：即使在仔细设置文本的顶部和底部填充之后，我也注意到一些细微的错误（在Firefox中，它肯定是目标浏览器之一）：

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

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

事实证明，设置正确的填充存在一个固有的问题：无法准确预测实际的

行高

有多高（即不深入挖掘字体度量的内部）。特别是在使用的字体不可预测的情况下（这在web上很常见）

---

所以问题是，如何为一段流动的文本添加背景色，使其正确地左右填充，并使行堆叠在彼此的正上方

一些警告：

• 设置

  display:inline block

  为否：它将创建一个矩形背景

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

• 显然，我正在寻找一个只使用css的解决方案，而不是javascript

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

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

我爱你，我爱你。。。
塞德·乌尔特里斯，利奥·尤塔·马蒂斯。。。

p{
宽度：30em；/*根据需要*/
字体大小：12px；
线高：2；
}
跨度{
填充：0.6em 0.5em；
背景图片：url（数据：image/gif；base64，r0lgoddhakabayabafvvvf///ywaaabaakqbads=）；
-webkit盒装饰中断：克隆；
-ms盒装饰中断：克隆；
-o-box-decoration-break：克隆；
盒子装饰破裂：克隆；
背景重复：重复-x；
背景尺寸：1×2米；
背景位置：中心；
}

请注意，我没有指定

字体系列

：字体度量现在不再是问题。此外，还可以使用任何

字体大小。将
行高
与
span
的设置相匹配很重要（见下文），但这也是“免费的”。甚至可以使用低于
正常值
的线条高度，尽管在这种情况下，上升线和下降线当然可以从背景延伸

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

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

水平填充（此处为
0.5em
）以及
框装饰中断：克隆
设置（也带有前缀，尽管我不知道实际需要哪些前缀）负责左右填充，还将所有行的填充设置为相等

对于半透明背景，dito png图像将取代gif图像。由于文件大小的原因，我在这里选择了gif。图像也可以单独加载，但使用数据uri会保存http请求（这将远远超过当前的70字节，并且需要很长时间）。
也是一篇关于内容框高度不可预测原因的深层文章<代码>行高

可以在css中设置，但不能设置

内容区高度

或

前导

（或

半前导

）。背景绘制在内容区域，而不是线条高度。