如何阻止多行文本的透明背景在行之间重叠？

Question

我面临的问题是，我有一个<span>包含多行文本且具有透明背景的内联文本。尽管有默认的行高，但文本上的背景重叠，导致背景覆盖在其​​自身上的较暗的水平行。

这是问题的一个很好的演示（图片+jsfiddle）

JsFiddle 演示了这个问题。

问题的最小再现

HTML：

<h1>
    <span>Although it is set to a line height of 1, the background behind text still overlaps between rows.</span> 
</h1>

CSS：

h1 {
    text-transform: uppercase;
    font-family: Arial;
    line-height: 1;
    font-size: 30px;
    background: rgba(0,0,0,0.5);
    color: #FFF;
    display: inline;
}
h1 span {
    position: relative;
}

解决方案要求

1. 背景颜色必须符合文字形状；所以设置span为display:inline-block不是一个可行的解决方案。
2. 设置固定line-height（或padding）并不是最佳答案，因为确切的字体渲染在浏览器和用户设置之间会发生变化。line-height例如，在 Chrome 中设置完美会在 Firefox 中产生不完美的结果。
3. 文本必须是动态的和语义的。解决方案不能涉及在服务器上为客户端渲染文本的图像表示。
4. 优选地允许任意padding添加或删除以减少或增加文本与背景边缘之间的空间。
5. JavaScript 可能没问题。我在这里使用 Angular 2，因此与其完美集成的答案甚至更好。

Answer 1

行高将接受“无”值，因此您可以设置它并且它可以工作（如果它是display：block），但是（至少在Mac上的chrome，safari和ff中）任何内联的行之间都有1px的间隙。因此，在下面的解决方案中，我只是在跨度中添加了 1px 的填充顶部来调整该间隙。我有点老套，但它完成了工作。显然，您需要进行更多的浏览器测试。它在 chrome 和 ff 上的浏览​​器缩放方面表现得相当好，但在 safari 上在非常大的缩放率下会出现一些问题。

h1 {
    text-transform: uppercase;
    font-family: Arial;
    line-height: none;
    font-size: 30px;
    color: #FFF;
}
h1 span {
  background: rgba(0,0,0,0.5);
  line-height: inherit;
  display: inline;
  padding-top: 1px;
}

<h1>
    <span>Although it is set to a line height of 1, the background behind text still overlaps between rows.</span> 
</h1>