Non-overlapping text backgrounds

<header>
	<h1><span>Is there a way to keep the irregular coloured background in such a way that each line of text doesn't obscure the previous line?</span></h1>
</header>

<style>
	header {
		width: 100%;
		max-width: 36em;
		margin: 0 auto;
		padding: 5em 0;
		text-align: center;
	}
	
	h1 {
		background: black;
		color: white;
		display: inline;
		font-weight: 200;
		line-height: 0.8;
	}
	h1 > span {
		position: relative;
	}
</style>