Overlap with cut-out (SVG method)

by PhilQ

HTML

<div id="some-header-background">

	<svg id="overlapping-content-with-text-cut-out" version="1.1" xmlns="http://www.w3.org/2000/svg">
		<defs>
      <mask id="cut-out-text">
				<!-- White ==> opacity 1 -->
				<!-- Black ==> opacity 0 -->
        <rect x="0" y="0" width="100%" height="100%" fill="white" />
        <text class="cut-out-text"
          fill="black"
          x="0%" y="100%"
        >Cut-out</text>
        <!--
           More about styling and position text in SVG:
           https://developer.mozilla.org/en-US/docs/Web/SVG/Element/text
           https://developer.mozilla.org/en-US/docs/Web/SVG/Element/tspan
        -->
      </mask>
		</defs>

		<foreignObject x="0" y="0" width="100%" height="100%" mask="url(#cut-out-text)">
			<div class="overlapping-content">Overlapping HTML</div>
		</foreignObject>

		<!-- <rect x="0" y="0" width="100%" height="100%" mask="url(#cut-out-text)" /> -->
	</svg>
	
</div>

CSS

* { margin: 0; box-sizing: border-box; }

#some-header-background {
	width: 100%;
	height: 150px;
	padding: 20px;
	background: linear-gradient(to right, red, blue);
}

#overlapping-content-with-text-cut-out {
	width: 100%;
	height: 100%;
}

.overlapping-content {
	width: 100%;
	height: 100%;
	background: linear-gradient(to bottom, yellow, cyan);
	font: bold 60px sans-serif;
}

text.cut-out-text {
	font-weight: 800;
	font-size: 100px;
	font-family: sans-serif;
}