mix-blend-mode-plus-lighter-basic.html (878B)
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 <link rel="match" href="reference/mix-blend-mode-plus-lighter-basic-ref.html"> 6 7 <style> 8 .container { 9 position: relative; 10 isolation: isolate; 11 width: 500px; 12 height: 500px; 13 } 14 .blue { background: #000064; } 15 .green { background: #006400; } 16 .common { 17 position: absolute; 18 width: 100px; 19 height: 100px; 20 opacity: 0.6; 21 } 22 .one { 23 top: 10px; 24 left: 10px; 25 } 26 .two { 27 top: 65px; 28 left: 30px; 29 mix-blend-mode: plus-lighter; 30 } 31 .three { 32 top: 120px; 33 left: 50px; 34 mix-blend-mode: plus-lighter; 35 } 36 </style> 37 38 <div class=container> 39 <div class="one common blue"></div> 40 <div class="two common blue"></div> 41 <div class="three common green"></div> 42 </div>