mix-blend-mode-nested-976533-ref.html (687B)
1 <!DOCTYPE HTML> 2 <head> 3 <style> 4 .parent { 5 width: 200px; 6 height: 200px; 7 position: absolute; 8 z-index: 1; 9 background-color: #00ff00; 10 } 11 12 .intermediate { 13 width: 100px; 14 height: 100px; 15 margin-left:50px; 16 background-color: #ffffff; 17 } 18 19 .child { 20 width: 100px; 21 height: 100px; 22 margin-left:50px; 23 background-color: #00ffff; 24 } 25 26 .grandchild { 27 width: 50px; 28 height: 100px; 29 margin-left: 50px; 30 background-color: #0000ff; 31 } 32 33 body { 34 margin:0px; 35 } 36 37 </style> 38 </head> 39 <body> 40 <div class="parent"> 41 <div class="intermediate"> 42 <div class="child"> 43 <div class="grandchild"></div> 44 </div> 45 </div> 46 </div> 47 </body>