HTML
CSS
JavaScript
<div class='container'><div class='background'></div><div class='foreground'>Foreground Text</div></div>
.container { position: relative; width: 300px; height: 200px; } .background { background-color: rgba(255, 0, 0, 0.5); width: 100%; height: 100%; position: absolute; top: 0; left: 0; } .foreground { isolation: isolate; background-color: rgba(0, 255, 0, 0.8); padding: 20px; position: relative; z-index: 1; }
// No JavaScript required for this demo
Foreground Text