html - 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

如果使用 inline-block 不能解决问题，一个好的方法是使用 box-shadow 来完成行间“未填充”的孔:

.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;
}