CSS:多行文本的透明背景色，没有难看的重叠或行与行之间的空格

Question

我在图像上覆盖半透明背景的白色文本。对于单线，这非常有效。但是，当文本是多行时，透明背景会与上下行重叠，并在发生重叠的每行之间创建一个丑陋的框。我也不希望行与行之间有空格，比如说如果行的高度很大——我正在寻找文本形状的统一透明背景。

下面是一个代码笔下的重叠示例：

https://codepen.io/haydentech/pen/oeQpXe

<h1 class="padded-multiline">
<span>How can I have multiline text with a transparent background, without these ugly boxes between lines?</span>
</h1>

.padded-multiline { 
line-height: 1.4; 
padding: 2px 0; 
width: 400px;
margin: 20px auto;
}
.padded-multiline span { 
background: rgba(0, 0, 0, 0.5);
color: #fff; 
display: inline;
padding: 0.45rem;
box-decoration-break: clone;
-webkit-box-decoration-break: clone;
}
body {
background: linear-gradient(to right, lightblue, yellow);
}

如果线的高度计算为完美(上例中为1.63(，则线之间不会有重叠或空白。然而，在所有浏览器上把它完美地计算到像素是一件愚蠢的事，所以我对去那里并不感兴趣，尤其是因为我的字体大小可能因桌面和手机而异。

Answer 1

如果使用内联块不能为您减少交易，一个好的破解方法是使用方框阴影来完成行之间的"未填充"孔：

.padded-multiline span { 
box-shadow: 0 -5px 0 rgba(0, 0, 0, 0.5),0 6px 0 rgba(0, 0, 0, 0.5);
line-height:150%;
background: rgba(0, 0, 0, 0.5);
color: #fff; 
display: inline;
box-decoration-break: clone;
-webkit-box-decoration-break: clone;
}