mix-blend-mode-plus-lighter-basic-ref.html (1048B)
1 <!DOCTYPE html> 2 <title>mix-blend-mode: plus-lighter test</title> 3 <link rel="author" title="Vladimir Levin" href="mailto:vmpstr@chromium.org"> 4 <link rel="help" href="https://drafts.fxtf.org/compositing-2/#mix-blend-mode"> 5 6 <style> 7 .container { 8 isolation: isolate; 9 position: relative; 10 width: 500px; 11 height: 500px; 12 } 13 .blue { background: #000064; } 14 .green { background: #006400; } 15 .common { 16 position: absolute; 17 width: 100px; 18 height: 100px; 19 opacity: 0.6; 20 } 21 .one { 22 top: 10px; 23 left: 10px; 24 } 25 .two { 26 top: 65px; 27 left: 30px; 28 } 29 .three { 30 top: 120px; 31 left: 50px; 32 } 33 .one_and_two { 34 position: absolute; 35 width: 80px; 36 height: 45px; 37 top: 65px; 38 left: 30px; 39 background: #000078; 40 } 41 .two_and_three { 42 position: absolute; 43 width: 80px; 44 height: 45px; 45 top: 120px; 46 left: 50px; 47 background: #003C3C; 48 } 49 </style> 50 51 <div class=container> 52 <div class="one common blue"></div> 53 <div class="two common blue"></div> 54 <div class="three common green"></div> 55 <div class="one_and_two"></div> 56 <div class="two_and_three"></div> 57 </div>