CSS：多行文本上的透明背景色，没有难看的重叠或行间距

Question

I am overlaying white text with a semi-transparent background over an image. For single lines, this works great. However, when the text is multi-line, the transparent background overlaps the lines below and above and create an ugly box in between each line where the overlap occurs. Nor do I want empty space in between lines either, say if the line height is large -- I'm looking for a uniform transparent background in the shape of the text.

Here's an codepen example of the overlap in action:

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

If the line-height were calculated perfectly (1.63 in the above example), then there would be no overlap or empty space between lines. However, getting that calculated perfectly down to the pixel on all browsers is a fool's errand, so I'm not really interested in going there, especially since my font size may vary between desktop and mobile.

Answer 1

If using inline-block doesn't cut the deal for your, a good hack would be to use box-shadow to complete the "unfilled" holes between lines:

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