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

Question

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

javascripthtmlcsstext-rendering

5

我面临一个问题，我有一个内联的 <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;
}

解决方案要求

背景颜色必须符合文本的形状；因此将设置为display:inline-block不是可行的解决方案。
设置固定的行高（或填充）不是最佳答案，因为精确的字体渲染在浏览器和用户设置之间会有所不同。例如，在Chrome中完美设置line-height将在Firefox中产生不完美的结果。
文本必须是动态的和语义化的。解决方案不能涉及在服务器上呈现文本的图像表示。
最好允许添加或删除任意填充以减少或增加文本与背景边缘之间的空间。
Javascript可能很好。我正在使用Angular 2，因此与其良好集成的答案更好。

- marked-down

有什么理由对我认为很好的问题进行恶意投票吗？ - marked-down

1

为什么不干脆去掉行高呢？ - Adam Buchanan Smith

1

@AdamBuchananSmith - 无法给那条评论点赞，有时候最简单的事情也很难 :p - Jaromanda X

1

不是固定的 line-height，而是计算版本 => height/font-size = line-height。但似乎 display: inline 在每一侧都会多出 1.5 像素 => 33/30 = 1.1 用于 line-height。 - Tim Vermaelen

1

领先和半领先...基本上，您的行高值小于字体大小。这会使行框流入相邻字形的“行框”..@TimVermaelen拥有您需要的值。或者是1.09999999。 - AA2992

显示剩余2条评论

1个回答

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Robert Wade · Answer 1

行高将接受“none”值，因此您可以设置它并且它有效（如果它是display:block），但是（至少在Mac上的Chrome、Safari和FF中）任何内联元素之间都有1像素的间隙。因此，在下面的解决方案中，我只是添加了一个1像素的padding top到span来调整那个间隙。这有点hacky，但它完成了工作。您肯定需要进行更多的浏览器测试。它在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>