How can I stop the transparent background of multi-line text overlapping between lines?

Question

I ran into a problem when I have inline <span>containing multi-line text with a transparent background. Although the default line has a default height, the background of the text overlaps, resulting in dark horizontal lines where the background overlaps.

Here is a good demonstration of the problem (image + jsfiddle)

JsFiddle demonstrates this problem.

Minimum Issue Playback

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

Decision requirements

• The background color should match the shape of the text; therefore, installing spanin is display:inline-blocknot a workable solution.
• line-height ( padding) , . , line-height Chrome Firefox.
• . .
• padding .
• Javascript . Angular 2 , , , .

Answer 1

"none", , ( : ), ( , , ff Mac) , , 1px . 1px , . , . , . ff, .

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>

Hide result