clip-text-out-of-flow-child.html (686B)
1 <!DOCTYPE html> 2 <link rel="help" href="https://drafts.csswg.org/css-backgrounds-4/#valdef-background-clip-text"> 3 <link rel="help" href="https://bugzilla.mozilla.org/show_bug.cgi?id=1996457"> 4 <link rel="match" href="clip-text-out-of-flow-child-ref.html"> 5 <link rel="stylesheet" href="/fonts/ahem.css"> 6 <style> 7 .box { 8 font: 10px/1 Ahem; 9 width: 100px; 10 height: 100px; 11 background-color: aqua; 12 color: transparent; 13 background-clip: text; 14 position: relative; 15 16 &::before { 17 width: 100px; 18 height: 100px; 19 background-color: blueviolet; 20 content: '_'; 21 position: absolute; 22 z-index: -1; 23 } 24 } 25 </style> 26 <div class="box">XXX</div>